এই পৃষ্ঠাটি কার্যক্ষমতা বিশ্লেষণের সাথে সম্পর্কিত Chrome DevTools বৈশিষ্ট্যগুলির একটি ব্যাপক রেফারেন্স।
Chrome DevTools ব্যবহার করে কিভাবে একটি পৃষ্ঠার কর্মক্ষমতা বিশ্লেষণ করতে হয় তার নির্দেশিত টিউটোরিয়ালের জন্য রানটাইম কর্মক্ষমতা বিশ্লেষণ দেখুন।
রেকর্ড কর্মক্ষমতা
আপনি রানটাইম বা লোড কর্মক্ষমতা রেকর্ড করতে পারেন.
রেকর্ড রানটাইম কর্মক্ষমতা
রানটাইম পারফরম্যান্স রেকর্ড করুন যখন আপনি একটি পৃষ্ঠার কার্যক্ষমতা বিশ্লেষণ করতে চান কারণ এটি চলছে, লোড করার বিপরীতে।
- আপনি যে পৃষ্ঠাটি বিশ্লেষণ করতে চান সেখানে যান।
- DevTools-এ পারফরম্যান্স ট্যাবে ক্লিক করুন।
রেকর্ড ক্লিক করুন
. 
পৃষ্ঠার সাথে যোগাযোগ করুন। DevTools আপনার ইন্টারঅ্যাকশনের ফলে ঘটে যাওয়া সমস্ত পৃষ্ঠা কার্যকলাপ রেকর্ড করে।
রেকর্ডিং বন্ধ করতে আবার রেকর্ড ক্লিক করুন বা থামাতে ক্লিক করুন।
রেকর্ড লোড কর্মক্ষমতা
লোড কর্মক্ষমতা রেকর্ড করুন যখন আপনি একটি পৃষ্ঠার কর্মক্ষমতা বিশ্লেষণ করতে চান যখন এটি লোড হচ্ছে, যেমন চলমান।
- আপনি যে পৃষ্ঠাটি বিশ্লেষণ করতে চান সেখানে যান।
- DevTools-এর পারফরম্যান্স প্যানেল খুলুন।
প্রোফাইলিং শুরু করুন এবং পৃষ্ঠা পুনরায় লোড করুন ক্লিক করুন
. DevTools প্রথমে কোন অবশিষ্ট স্ক্রিনশট এবং ট্রেস মুছে ফেলার জন্য about:blankনেভিগেট করে। তারপর DevTools পৃষ্ঠাটি পুনরায় লোড হওয়ার সময় পারফরম্যান্স মেট্রিক্স রেকর্ড করে এবং লোড শেষ হওয়ার কয়েক সেকেন্ড পরে স্বয়ংক্রিয়ভাবে রেকর্ডিং বন্ধ করে দেয়।
DevTools স্বয়ংক্রিয়ভাবে রেকর্ডিংয়ের অংশে জুম ইন করে যেখানে বেশিরভাগ কার্যকলাপ ঘটেছে।
এই উদাহরণে, পারফরম্যান্স প্যানেল একটি পৃষ্ঠা লোডের সময় কার্যকলাপ দেখায়।
রেকর্ড করার সময় স্ক্রিনশট ক্যাপচার করুন
রেকর্ডিংয়ের সময় প্রতিটি ফ্রেমের একটি স্ক্রিনশট ক্যাপচার করতে স্ক্রিনশট চেকবক্স সক্রিয় করুন।
স্ক্রিনশটগুলির সাথে কীভাবে ইন্টারঅ্যাক্ট করতে হয় তা শিখতে একটি স্ক্রিনশট দেখুন দেখুন৷
রেকর্ড করার সময় জোর করে আবর্জনা সংগ্রহ করুন
আপনি যখন একটি পৃষ্ঠা রেকর্ড করছেন, তখন জোর করে আবর্জনা সংগ্রহ করতে গারবেজ সংগ্রহ করুন ক্লিক করুন।
রেকর্ডিং সেটিংস দেখান
ক্যাপচার সেটিংস ক্লিক করুন 
DevTools কীভাবে পারফরম্যান্স রেকর্ডিং ক্যাপচার করে তার সাথে সম্পর্কিত আরও সেটিংস প্রকাশ করতে।
জাভাস্ক্রিপ্ট নমুনা নিষ্ক্রিয়
ডিফল্টরূপে, একটি রেকর্ডিংয়ের প্রধান ট্র্যাক জাভাস্ক্রিপ্ট ফাংশনের বিস্তারিত কল স্ট্যাক প্রদর্শন করে যা রেকর্ডিংয়ের সময় কল করা হয়েছিল। এই কল স্ট্যাকগুলি নিষ্ক্রিয় করতে:
- ক্যাপচার সেটিংস খুলুন
মেনু রেকর্ডিং সেটিংস দেখান দেখুন। - অক্ষম জাভাস্ক্রিপ্ট নমুনা চেকবক্স সক্রিয় করুন.
- পৃষ্ঠাটির একটি রেকর্ডিং নিন।
নিম্নলিখিত স্ক্রিনশটগুলি জাভাস্ক্রিপ্ট নমুনাগুলি নিষ্ক্রিয় এবং সক্রিয় করার মধ্যে পার্থক্য দেখায়৷ নমুনা নিষ্ক্রিয় করার সময় রেকর্ডিংয়ের প্রধান ট্র্যাকটি অনেক ছোট হয়, কারণ এটি জাভাস্ক্রিপ্টের সমস্ত কল স্ট্যাক বাদ দেয়।
এই উদাহরণটি অক্ষম JS নমুনা সহ একটি রেকর্ডিং দেখায়।
এই উদাহরণটি সক্ষম জেএস নমুনা সহ একটি রেকর্ডিং দেখায়।
রেকর্ড করার সময় নেটওয়ার্ক থ্রোটল করুন
রেকর্ড করার সময় নেটওয়ার্ক থ্রোটল করতে:
- ক্যাপচার সেটিংস খুলুন
মেনু রেকর্ডিং সেটিংস দেখান দেখুন। - থ্রটলিং এর নির্বাচিত স্তরে নেটওয়ার্ক সেট করুন।
ড্রপ-ডাউন মেনুতে, পারফরম্যান্স প্যানেল একটি ডিফল্ট থ্রটলিং প্রিসেট বা একটি প্রিসেট সুপারিশ করতে পারে যা ফিল্ড ডেটার উপর ভিত্তি করে আপনার ব্যবহারকারীদের অভিজ্ঞতার আনুমানিক।
রেকর্ডিং করার সময় সিপিইউ থ্রোটল করুন
রেকর্ড করার সময় CPU থ্রোটল করতে:
- ক্যাপচার সেটিংস খুলুন
মেনু রেকর্ডিং সেটিংস দেখান দেখুন। - থ্রোটলিং এর নির্বাচিত স্তরে CPU সেট করুন।
থ্রটলিং আপনার কম্পিউটারের ক্ষমতার সাথে আপেক্ষিক। উদাহরণস্বরূপ, 2x স্লোডাউন বিকল্পটি আপনার CPU কে তার স্বাভাবিক ক্ষমতার চেয়ে 2 গুণ ধীর গতিতে কাজ করে। DevTools সত্যিকার অর্থে মোবাইল ডিভাইসের CPU গুলিকে অনুকরণ করতে পারে না, কারণ মোবাইল ডিভাইসের আর্কিটেকচার ডেস্কটপ এবং ল্যাপটপের থেকে অনেক আলাদা।
ড্রপ-ডাউন মেনুতে, পারফরম্যান্স প্যানেল একটি ডিফল্ট থ্রটলিং প্রিসেট বা একটি প্রিসেট সুপারিশ করতে পারে যা ফিল্ড ডেটার উপর ভিত্তি করে আপনার ব্যবহারকারীদের অভিজ্ঞতার আনুমানিক।
CSS নির্বাচক পরিসংখ্যান সক্ষম করুন
দীর্ঘদিন ধরে চলা রিক্যালকুলেট স্টাইল ইভেন্টের সময় আপনার CSS নিয়ম নির্বাচকদের পরিসংখ্যান দেখতে:
- ক্যাপচার সেটিংস খুলুন
মেনু রেকর্ডিং সেটিংস দেখান দেখুন। - CSS নির্বাচক পরিসংখ্যান সক্ষম করুন চেকবক্স চেক করুন।
আরও বিশদ বিবরণের জন্য, স্টাইল ইভেন্টগুলি পুনরায় গণনা করার সময় কীভাবে CSS নির্বাচকের কার্যকারিতা বিশ্লেষণ করবেন তা দেখুন।
উন্নত পেইন্ট ইন্সট্রুমেন্টেশন সক্ষম করুন
বিস্তারিত পেইন্ট ইনস্ট্রুমেন্টেশন দেখতে:
- ক্যাপচার সেটিংস খুলুন মেনু রেকর্ডিং সেটিংস দেখান দেখুন।
- উন্নত পেইন্ট ইন্সট্রুমেন্টেশন সক্ষম করুন চেকবক্স চেক করুন।
পেইন্টের তথ্যের সাথে কীভাবে ইন্টারঅ্যাক্ট করতে হয় তা শিখতে, স্তরগুলি দেখুন এবং পেইন্ট প্রোফাইলার দেখুন ।
একটি রেকর্ডিং টীকা এবং শেয়ার করুন
টীকা দেখুন এবং আপনার কর্মক্ষমতা ফলাফল শেয়ার করুন .
আগের রেকর্ডিং সাফ করুন
রেকর্ডিং করার পরে, রেকর্ডিং সাফ টিপুন 
পারফরম্যান্স প্যানেল থেকে রেকর্ডিং সাফ করতে।
একটি কর্মক্ষমতা রেকর্ডিং বিশ্লেষণ
আপনি রানটাইম পারফরম্যান্স রেকর্ড করার পরে বা লোড পারফরম্যান্স রেকর্ড করার পরে , পারফরম্যান্স প্যানেল এইমাত্র যা ঘটেছে তার কার্যক্ষমতা বিশ্লেষণ করার জন্য প্রচুর ডেটা সরবরাহ করে।
কর্মযোগ্য অন্তর্দৃষ্টি পান
পারফরম্যান্স প্যানেল লাইটহাউস রিপোর্ট এবং এখন অবহেলিত পারফরম্যান্স ইনসাইট প্যানেল থেকে পারফরম্যান্সের অন্তর্দৃষ্টি একত্রিত করে। এই অন্তর্দৃষ্টিগুলি পারফরম্যান্স উন্নত করার উপায়গুলির পরামর্শ দিতে পারে এবং নিম্নলিখিত পারফরম্যান্সের সমস্যাগুলির উপর নির্দেশিত বিশ্লেষণ প্রদান করতে পারে, যার মধ্যে রয়েছে কিন্তু সীমাবদ্ধ নয়:
- সাবপার্ট দ্বারা LCP এবং INP
- LCP অনুরোধ আবিষ্কার
- লেআউট শিফট অপরাধীদের
- ব্লক করার অনুরোধ রেন্ডার করুন
- তৃতীয় পক্ষ
- ছবি বিতরণ
- নথি অনুরোধ বিলম্বিত
- মোবাইলের জন্য ভিউপোর্ট অপ্টিমাইজেশান
- CSS নির্বাচক খরচ
- জোরপূর্বক রিফ্লো
- DOM সাইজ অপ্টিমাইজ করুন
- নেটওয়ার্ক নির্ভরতা গাছ
অন্তর্দৃষ্টি ব্যবহার করতে:
- একটি কর্মক্ষমতা রেকর্ডিং করুন .
- পারফরম্যান্স প্যানেলের বাম সাইডবারে, অন্তর্দৃষ্টি ট্যাবটি খুলুন, বিভিন্ন বিভাগ প্রসারিত করুন এবং আইটেমগুলিতে হোভার করুন এবং ক্লিক করুন৷ পারফরম্যান্স প্যানেল ট্রেসে সংশ্লিষ্ট ইভেন্টগুলিকে হাইলাইট করবে।
রেকর্ডিং নেভিগেট করুন
আপনাকে নেভিগেট করতে সাহায্য করার জন্য, যখন আপনি পারফরম্যান্স ট্রেসের উপর ঘোরান, পারফরম্যান্স প্যানেল নিম্নলিখিতগুলি করে:
- আপনাকে একটি উল্লম্ব মার্কার দেখায় যা আপনি যখন টাইমলাইন ওভারভিউতে হোভার করেন তখন পুরো পারফরম্যান্স ট্রেসকে বিস্তৃত করে।
- আপনি যখন প্রধান ট্র্যাকের আইটেমগুলির উপর হোভার করেন তখন টাইমলাইন ওভারভিউতে একটি ব্যাপ্তি হাইলাইট করে৷
আপনার পারফরম্যান্স রেকর্ডিং ঘনিষ্ঠভাবে পরিদর্শন করতে, আপনি একটি রেকর্ডিংয়ের একটি অংশ নির্বাচন করতে পারেন, একটি দীর্ঘ শিখা চার্ট স্ক্রোল করতে পারেন, জুম ইন এবং আউট করতে পারেন এবং জুম স্তরগুলির মধ্যে লাফ দিতে ব্রেডক্রাম্ব ব্যবহার করতে পারেন৷
নেভিগেট করতে কীবোর্ড শর্টকাট ব্যবহার করুন
রেকর্ডিং দ্রুত নেভিগেট করতে কীবোর্ড শর্টকাট ব্যবহার করতে, প্রথমে, আপনার পছন্দের কীবোর্ড নেভিগেশন শৈলী চয়ন করুন।
প্যানেলের উপরের-ডান কোণায়, ক্লিক করুন শর্টকাট দেখান এবং নিম্নলিখিতগুলির মধ্যে একটি নির্বাচন করুন:
- ক্লাসিক : মাউস হুইল দিয়ে জুম করুন (টাচপ্যাড উপরে বা নিচে) এবং শিফট + মাউস হুইল দিয়ে উল্লম্ব স্ক্রোল করুন।
- আধুনিক : মাউস হুইল সহ উল্লম্ব স্ক্রোল, শিফট + মাউস হুইল সহ অনুভূমিক স্ক্রোল এবং কমান্ড/কন্ট্রোল + মাউস হুইল দিয়ে জুম করুন।
শর্টকাট ডায়ালগ আপনাকে উপলব্ধ শর্টকাটগুলির একটি চিটশীট প্রদান করে।
রেকর্ডিংয়ের একটি অংশ নির্বাচন করুন
পারফরম্যান্স প্যানেলের অ্যাকশন বারের অধীনে এবং রেকর্ডিংয়ের শীর্ষে, আপনি CPU এবং NET চার্ট সহ টাইমলাইন ওভারভিউ বিভাগটি দেখতে পারেন।
একটি রেকর্ডিংয়ের একটি অংশ নির্বাচন করতে, ক্লিক করুন এবং ধরে রাখুন, তারপর টাইমলাইন ওভারভিউ জুড়ে বাম বা ডানে টেনে আনুন।
কীবোর্ড ব্যবহার করে একটি অংশ নির্বাচন করতে:
- প্রধান ট্র্যাক বা তার প্রতিবেশী কোনো ফোকাস.
- যথাক্রমে জুম ইন, বামে সরাতে, জুম আউট এবং ডানদিকে সরাতে W , A , S , D কীগুলি ব্যবহার করুন৷
একটি ট্র্যাকপ্যাড ব্যবহার করে একটি অংশ নির্বাচন করতে:
- টাইমলাইন ওভারভিউ বিভাগ বা যেকোনও ট্র্যাক ( প্রধান এবং এর প্রতিবেশী) উপর হোভার করুন।
- দুটি আঙুল ব্যবহার করে, জুম আউট করতে উপরে সোয়াইপ করুন, বামে সরাতে বাম দিকে সোয়াইপ করুন, জুম ইন করতে নিচে সোয়াইপ করুন এবং ডানদিকে সরাতে ডানদিকে সোয়াইপ করুন।
ব্রেডক্রাম্ব তৈরি করুন এবং জুম লেভেলের মধ্যে লাফ দিন
টাইমলাইন ওভারভিউ আপনাকে পর পর একাধিক নেস্টেড ব্রেডক্রাম্ব তৈরি করতে দেয়, জুম লেভেল বাড়াতে এবং তারপর জুম লেভেলের মধ্যে অবাধে লাফ দিতে দেয়।
ব্রেডক্রাম্ব তৈরি এবং ব্যবহার করতে:
- টাইমলাইন ওভারভিউতে , রেকর্ডিংয়ের একটি অংশ নির্বাচন করুন ।
- নির্বাচনের উপর হোভার করুন এবং N ms বোতামে ক্লিক করুন। টাইমলাইন ওভারভিউ পূরণ করতে নির্বাচনটি প্রসারিত হয়। টাইমলাইন ওভারভিউয়ের শীর্ষে ব্রেডক্রাম্বের একটি চেইন তৈরি করা শুরু হয়।
- আরেকটি নেস্টেড ব্রেডক্রাম্ব তৈরি করতে আগের দুটি ধাপ পুনরাবৃত্তি করুন। আপনি ব্রেডক্রাম্ব নেস্ট করা চালিয়ে যেতে পারেন যতক্ষণ না নির্বাচনের পরিসর 5 মিলিসেকেন্ডের বেশি হয়।
- একটি নির্বাচিত জুম স্তরে যেতে, টাইমলাইন ওভারভিউ- এর উপরে চেইনের সংশ্লিষ্ট ব্রেডক্রাম্বে ক্লিক করুন।
ব্রেডক্রাম্বের বাচ্চাদের অপসারণ করতে, প্যারেন্ট ব্রেডক্রাম্বে ডান-ক্লিক করুন এবং চাইল্ড ব্রেডক্রাম্বগুলি সরান নির্বাচন করুন।
একটি দীর্ঘ শিখা চার্ট স্ক্রোল করুন
প্রধান ট্র্যাক বা তার প্রতিবেশীদের মধ্যে একটি দীর্ঘ শিখা চার্ট স্ক্রোল করতে, ক্লিক করুন এবং ধরে রাখুন, তারপরে আপনি যা খুঁজছেন তা দৃশ্যে না আসা পর্যন্ত যে কোনও দিকে টেনে আনুন।
ফ্লেম চার্টে অপ্রাসঙ্গিক স্ক্রিপ্টগুলিকে উপেক্ষা করুন
আপনার কোডে আরও ভালোভাবে ফোকাস করতে, আপনি তালিকা উপেক্ষা করতে অপ্রাসঙ্গিক স্ক্রিপ্ট যোগ করতে পারেন।
স্ক্রিপ্ট উপেক্ষা করতে, নিম্নলিখিতগুলির মধ্যে একটি করুন:
- শীর্ষ অ্যাকশন বারে তালিকা সেটিংস উপেক্ষা করুন ডায়ালগ দেখান ক্লিক করুন এবং ইনপুট ক্ষেত্রে একটি নিয়মিত অভিব্যক্তি টাইপ করুন। আপনার টাইপ করার সাথে সাথে শিখা চার্টটি নতুন নিয়ম প্রয়োগ করবে।
- একটি স্ক্রিপ্টে ডান-ক্লিক করুন এবং তালিকা উপেক্ষা করতে স্ক্রিপ্ট যুক্ত করুন নির্বাচন করুন। পারফরম্যান্স প্যানেল এই স্ক্রিপ্টটিকে তালিকায় যুক্ত করে তালিকা সেটিংস উপেক্ষা করুন ডায়ালগ দেখান ।
প্যানেল স্বয়ংক্রিয়ভাবে এই ধরনের স্ক্রিপ্টগুলির জন্য অত্যধিক নেস্টিং ভেঙে ফেলবে এবং সেগুলিকে On ignore list ( REGULAR_EXPRESSION ) ৷
শো উপেক্ষা তালিকা সেটিংস ডায়ালগে , আপনি উপেক্ষা তালিকা নিয়ম চালু এবং বন্ধ করতে পারেন।
উপেক্ষা তালিকা থেকে একটি স্ক্রিপ্ট অপসারণ করতে, শিখা চার্টে ডান-ক্লিক করুন এবং উপেক্ষা তালিকা থেকে স্ক্রিপ্ট সরান নির্বাচন করুন বা উপেক্ষা তালিকা সেটিংস ডায়ালগে এটির উপরে হোভার করুন এবং ক্লিক করুন ।
DevTools আপনি সেটিংস > উপেক্ষা তালিকাতে যোগ করা উপেক্ষা তালিকার নিয়মগুলি সংরক্ষণ করে।
অতিরিক্তভাবে, শুধুমাত্র প্রথম-পক্ষের স্ক্রিপ্টগুলিতে ফোকাস করতে, টিক দিন Dim 3rd Party . পারফরম্যান্স প্যানেল তৃতীয় পক্ষের স্ক্রিপ্টগুলিকে ধূসর করে দেবে।
অনুসন্ধান কার্যক্রম
আপনি প্রধান ট্র্যাকের সমস্ত কার্যকলাপ এবং নেটওয়ার্ক ট্র্যাকের অনুরোধগুলি অনুসন্ধান করতে পারেন৷
পারফরম্যান্স প্যানেলের নীচে একটি অনুসন্ধান বাক্স খুলতে, টিপুন:
- macOS: কমান্ড + এফ
- উইন্ডোজ, লিনাক্স: কন্ট্রোল + এফ
এই উদাহরণটি নীচে অনুসন্ধান বাক্সে একটি নিয়মিত অভিব্যক্তি দেখায় যা E দিয়ে শুরু হওয়া যেকোনো কার্যকলাপ খুঁজে পায়।
আপনার প্রশ্নের সাথে মেলে এমন কার্যকলাপের মাধ্যমে চক্র করতে:
- Previous বা পরবর্তী বোতামে ক্লিক করুন।
- পূর্ববর্তী নির্বাচন করতে Shift + Enter টিপুন বা পরবর্তী নির্বাচন করতে Enter টিপুন ।
পারফরম্যান্স প্যানেল অনুসন্ধান বাক্সে নির্বাচিত কার্যকলাপের উপর একটি টুলটিপ দেখায়।
ক্যোয়ারী সেটিংস পরিবর্তন করতে:
- ক্যোয়ারী কেস সংবেদনশীল করতে ম্যাচ কেস ক্লিক করুন।
- আপনার ক্যোয়ারীতে রেগুলার এক্সপ্রেশন ব্যবহার করতে রেগুলার এক্সপ্রেশনে ক্লিক করুন।
অনুসন্ধান বাক্সটি লুকানোর জন্য, বাতিল ক্লিক করুন।
ট্র্যাকগুলির ক্রম পরিবর্তন করুন এবং তাদের লুকান৷
পারফরম্যান্স ট্রেস ডিক্লাটার করতে, আপনি ট্র্যাকের ক্রম পরিবর্তন করতে পারেন এবং ট্র্যাক কনফিগারেশন মোডে অপ্রাসঙ্গিকগুলি লুকিয়ে রাখতে পারেন৷
ট্র্যাকগুলি সরাতে এবং লুকাতে:
- কনফিগারেশন মোডে প্রবেশ করতে, একটি ট্র্যাকের নামের উপর ডান-ক্লিক করুন এবং ট্র্যাকগুলি কনফিগার করুন নির্বাচন করুন।
- একটি ট্র্যাক উপরে বা নীচে সরাতে দিকে বা দিকে ক্লিক করুন। এটি লুকাতে ক্লিক করুন।
- সমাপ্ত হলে, কনফিগারেশন মোড থেকে প্রস্থান করতে নীচের অংশে কনফিগার করা ট্র্যাক সমাপ্ত করুন ক্লিক করুন।
এই কর্মপ্রবাহটি কার্যকরভাবে দেখতে ভিডিওটি দেখুন।
পারফরম্যান্স প্যানেল নতুন ট্রেসের জন্য ট্র্যাক কনফিগারেশন সংরক্ষণ করে কিন্তু পরবর্তী DevTools সেশনে নয়।
প্রধান থ্রেড কার্যকলাপ দেখুন
পৃষ্ঠার প্রধান থ্রেডে ঘটে যাওয়া কার্যকলাপ দেখতে প্রধান ট্র্যাকটি ব্যবহার করুন।
সারাংশ ট্যাবে এটি সম্পর্কে আরও তথ্য দেখতে একটি ইভেন্টে ক্লিক করুন, যার মধ্যে রয়েছে কিন্তু এতে সীমাবদ্ধ নয়: সময়কাল (এবং স্বয়ং-কাল), উৎস স্ক্রিপ্টে সংশ্লিষ্ট লাইনের লিঙ্ক, মূল URL (একটি সত্তার নাম সহ, যদি জানা থাকে) স্ট্যাক ট্রেস, যদি থাকে, এবং একটি পাই চার্টে টাইমিং ব্রেকডাউন।
পারফরম্যান্স প্যানেল নীল রঙে নির্বাচিত ইভেন্টের রূপরেখা দেয়।
এই উদাহরণটি সারাংশ ট্যাবে get ফাংশন কল ইভেন্ট সম্পর্কে আরও তথ্য দেখায়।
প্রথম এবং তৃতীয় পক্ষের ইভেন্টগুলির মধ্যে পার্থক্য করুন
তৃতীয় পক্ষের পক্ষের কোডের উপর অত্যধিক নির্ভরতা নেতিবাচকভাবে লোড কর্মক্ষমতা প্রভাবিত করতে পারে। পারফরম্যান্স প্যানেল আপনাকে ট্রেসে প্রথম এবং তৃতীয়-পক্ষের ইভেন্টগুলির মধ্যে দৃশ্যত পার্থক্য করতে সাহায্য করতে পারে, তাই আপনি আপনার পৃষ্ঠার বিষয়বস্তুকে অগ্রাধিকার দিতে তৃতীয় পক্ষের কোড লোড করা কমানো বা পিছিয়ে দেওয়ার বিষয়ে আরও সচেতন সিদ্ধান্ত নিতে পারেন।
শুধুমাত্র প্রথম পক্ষের কোডের কর্মক্ষমতার উপর ফোকাস করতে:
- নিশ্চিত করুন যে পারফরম্যান্স ট্রেসে বা অন্তর্দৃষ্টি ট্যাবে কিছুই নির্বাচন করা হয়নি। এটি করতে, ট্রেসে একটি খালি জায়গায় ক্লিক করুন।
- শীর্ষে অ্যাকশন বারে 3য় পক্ষগুলিকে ম্লান করুন চেক করুন৷ পারফরম্যান্স প্যানেল পারফরম্যান্স ট্রেস থেকে তৃতীয়-পক্ষ-সম্পর্কিত ইভেন্টগুলিকে ধূসর করে এবং শুধুমাত্র প্রথম-পক্ষ হাইলাইট করে।
'1ম / 3য় পক্ষ' টেবিলের সাথে ইভেন্টগুলি হাইলাইট করুন
টাইমলাইন ওভারভিউতে একটি নির্বাচিত পরিসরের মধ্যে এবং যখন কোনও ইভেন্ট নির্বাচন করা হয় না, তখন সারাংশ ট্যাবটি একটি 1ম/3য় পক্ষের টেবিল দেখায় যা নিম্নলিখিতগুলির স্বতন্ত্র স্থানান্তর আকার এবং প্রধান থ্রেড সময়গুলি তালিকাভুক্ত করে:
- প্রথম পক্ষের সত্তা একটি
1st partyব্যাজ দ্বারা চিহ্নিত৷ - নির্বাচিত পরিসরে সমস্ত শনাক্ত করা তৃতীয় পক্ষের সত্তা, অচিহ্নিত।
-
Extensionব্যাজ দ্বারা চিহ্নিত এক্সটেনশনগুলি৷ - অন্যান্য
[unattributed]সত্তা।
ট্রেসে হাইলাইট করা সম্পর্কিত ইভেন্টগুলি দেখতে এবং বাকিগুলি ধূসর হয়ে গেছে, টেবিলে থাকা সত্তাগুলির উপর ঘোরান৷ একটি সত্তার ইভেন্ট হাইলাইট করতে, টেবিলে এটি নির্বাচন করুন। হাইলাইটিং অপসারণ করতে, ট্রেসে যেকোন খালি জায়গায় ক্লিক করুন।
বটম-আপ ট্যাবে এই সত্তার দ্বারা গোষ্ঠীবদ্ধ কার্যকলাপগুলি খুলতে, টেবিলের সত্তার উপর হোভার করুন এবং এর পাশে Bottom-up-এ ক্লিক করুন।
শিখা চার্ট পড়ুন
পারফরম্যান্স প্যানেল একটি শিখা চার্টে প্রধান থ্রেড কার্যকলাপ প্রতিনিধিত্ব করে। এক্স-অক্ষ সময়ের সাথে রেকর্ডিং প্রতিনিধিত্ব করে। y-অক্ষ কল স্ট্যাকের প্রতিনিধিত্ব করে। উপরের ঘটনাগুলো নিচের ঘটনা ঘটায়।
এই উদাহরণটি প্রধান ট্র্যাকের একটি শিখা চার্ট দেখায়। একটি click ইভেন্ট একটি বেনামী ফাংশন কল সৃষ্টি করেছে। এই ফাংশনটি, ঘুরে, onEndpointClick_ , যাকে বলা হয় handleClick_ , ইত্যাদি।
পারফরম্যান্স প্যানেল ফ্লেম চার্ট ভাঙতে এবং এটিকে আরও পঠনযোগ্য করে তুলতে স্ক্রিপ্টগুলিকে এলোমেলো রঙগুলি বরাদ্দ করে৷ আগের উদাহরণে, একটি স্ক্রিপ্ট থেকে ফাংশন কলগুলি হালকা নীল রঙের হয়। অন্য স্ক্রিপ্ট থেকে কল রঙিন হালকা গোলাপী হয়. গাঢ় হলুদ স্ক্রিপ্টিং কার্যকলাপ প্রতিনিধিত্ব করে, এবং বেগুনি ইভেন্ট রেন্ডারিং কার্যকলাপ প্রতিনিধিত্ব করে। এই গাঢ় হলুদ এবং বেগুনি ইভেন্টগুলি সমস্ত রেকর্ডিং জুড়ে সামঞ্জস্যপূর্ণ।
লম্বা টাস্কগুলিও একটি লাল ত্রিভুজ দিয়ে হাইলাইট করা হয় এবং 50 মিলিসেকেন্ডের বেশি অংশের সাথে লাল রঙে ছায়া দেওয়া হয়:
এই উদাহরণে, টাস্কটি 400 মিলিসেকেন্ডের বেশি সময় নিয়েছে, তাই শেষ 350 মিলিসেকেন্ডের প্রতিনিধিত্বকারী অংশটি লাল রঙে শেড করা হয়েছে, যখন প্রাথমিক 50 মিলিসেকেন্ড নয়।
অতিরিক্তভাবে, প্রধান ট্র্যাক profile() এবং profileEnd() কনসোল ফাংশনগুলির সাথে শুরু হওয়া এবং বন্ধ হওয়া CPU প্রোফাইলগুলির তথ্য দেখায়।
JavaScript কলের বিস্তারিত ফ্লেম চার্ট লুকানোর জন্য, JavaScript নমুনা নিষ্ক্রিয় করুন দেখুন। যখন JS নমুনাগুলি অক্ষম করা হয়, আপনি শুধুমাত্র উচ্চ-স্তরের ইভেন্টগুলি দেখতে পান যেমন Event (click) এবং Function Call ৷
ট্র্যাক ইভেন্ট initiators
প্রধান ট্র্যাক তীরগুলি দেখাতে পারে যা নিম্নলিখিত সূচনাকারীদের এবং তাদের দ্বারা সৃষ্ট ঘটনাগুলিকে সংযুক্ত করে:
- শৈলী বা বিন্যাস অবৈধকরণ -> শৈলী বা বিন্যাস পুনরায় গণনা করুন
- অ্যানিমেশন ফ্রেম অনুরোধ -> অ্যানিমেশন ফ্রেম ফায়ার করা হয়েছে
- নিষ্ক্রিয় কলব্যাকের অনুরোধ করুন -> ফায়ার আইডল কলব্যাক
- টাইমার ইনস্টল করুন -> টাইমার ফায়ারড
- ওয়েবসকেট তৈরি করুন -> পাঠান... এবং ওয়েবসকেট হ্যান্ডশেক গ্রহণ করুন বা ওয়েবসকেট ধ্বংস করুন
- পোস্টটাস্ক শিডিউল করুন -> ফায়ার পোস্টটাস্ক বা পোস্ট টাস্ক বাতিল করুন
তীরগুলি দেখতে, শিখা চার্টে একটি সূচনাকারী বা এটি যে ঘটনাটি ঘটিয়েছে তা সন্ধান করুন এবং এটি নির্বাচন করুন৷
নির্বাচিত হলে, সারাংশ ট্যাব ইনিশিয়েটরদের লিঙ্কের জন্য ইনিশিয়েটর দেখায় এবং তাদের দ্বারা সৃষ্ট ইভেন্টগুলির জন্য লিঙ্ক দ্বারা শুরু করা হয় । সংশ্লিষ্ট ইভেন্টগুলির মধ্যে লাফ দিতে তাদের ক্লিক করুন।
শিখা চার্টে ফাংশন এবং তাদের সন্তানদের লুকান
প্রধান থ্রেডে শিখা চার্টটি ডিক্লাটার করতে, আপনি নির্বাচিত ফাংশন বা তাদের বাচ্চাদের লুকিয়ে রাখতে পারেন:
প্রধান ট্র্যাকে, একটি ফাংশনে ডান-ক্লিক করুন এবং নিম্নলিখিত বিকল্পগুলির মধ্যে একটি বেছে নিন বা সংশ্লিষ্ট শর্টকাট টিপুন:
- লুকান ফাংশন (
H) - শিশুদের লুকান (
C) - পুনরাবৃত্তি শিশুদের লুকান (
R) - বাচ্চাদের রিসেট করুন (
U) - ট্রেস রিসেট করুন (
T) - তালিকা উপেক্ষা করতে স্ক্রিপ্ট যোগ করুন (
I)
একটি ড্রপ-ডাউন বোতাম লুকানো শিশুদের সাথে ফাংশন নামের পাশে প্রদর্শিত হবে।
- লুকান ফাংশন (
লুকানো শিশুদের সংখ্যা দেখতে, ড্রপ-ডাউন বোতামের উপর হোভার করুন।
লুকানো শিশুদের বা পুরো ফ্লেম চার্টের সাথে একটি ফাংশন রিসেট করতে, ফাংশনটি নির্বাচন করুন এবং
Uটিপুন বা যেকোনো ফাংশনে ডান-ক্লিক করুন এবং যথাক্রমে রিসেট ট্রেস নির্বাচন করুন।
শিখা চার্টে স্ক্রিপ্ট উপেক্ষা করুন
উপেক্ষা তালিকায় একটি স্ক্রিপ্ট যোগ করতে, চার্টে একটি স্ক্রিপ্টে ডান-ক্লিক করুন এবং তালিকা উপেক্ষা করতে স্ক্রিপ্ট যোগ করুন নির্বাচন করুন।
চার্ট উপেক্ষা করা স্ক্রিপ্টগুলিকে ভেঙে দেয়, সেগুলিকে উপেক্ষার তালিকায় চিহ্নিত করে এবং সেটিংস > উপেক্ষা তালিকাতে কাস্টম বর্জন নিয়মগুলিতে যোগ করে। উপেক্ষা করা স্ক্রিপ্টগুলি সংরক্ষণ করা হয় যতক্ষণ না আপনি সেগুলিকে ট্রেস থেকে বা কাস্টম বর্জনের নিয়ম থেকে সরিয়ে না দেন৷
একটি টেবিলে কার্যকলাপ দেখুন
একটি পৃষ্ঠা রেকর্ড করার পরে, কার্যকলাপ বিশ্লেষণ করার জন্য আপনাকে শুধুমাত্র প্রধান ট্র্যাকের উপর নির্ভর করতে হবে না। DevTools কার্যক্রম বিশ্লেষণের জন্য তিনটি সারণী ভিউ প্রদান করে। প্রতিটি দৃশ্য আপনাকে ক্রিয়াকলাপের উপর একটি ভিন্ন দৃষ্টিকোণ দেয়:
- আপনি যখন সবচেয়ে বেশি কাজ করে এমন রুট ক্রিয়াকলাপগুলি দেখতে চান, কল ট্রি ট্যাবটি ব্যবহার করুন৷
- আপনি যখন ক্রিয়াকলাপগুলি দেখতে চান যেখানে সবচেয়ে বেশি সময় সরাসরি ব্যয় হয়েছে, নীচের-আপ ট্যাবটি ব্যবহার করুন৷
- আপনি রেকর্ডিংয়ের সময় যে ক্রমানুসারে ক্রিয়াকলাপগুলি দেখতে চান, ইভেন্ট লগ ট্যাবটি ব্যবহার করুন।
আপনি যা খুঁজছেন তা দ্রুত খুঁজে পেতে সাহায্য করার জন্য, তিনটি ট্যাবেই ফিল্টার বারের পাশে উন্নত ফিল্টারিংয়ের জন্য বোতাম রয়েছে:
- ম্যাচ কেস ।
- রেগুলার এক্সপ্রেশন ।
- পুরো শব্দ মেলে ।
পারফরম্যান্স প্যানেলের প্রতিটি ট্যাবুলার ভিউ ফাংশন কলের মতো কার্যকলাপের লিঙ্ক দেখায়। আপনাকে ডিবাগ করতে সাহায্য করতে, DevTools সোর্স ফাইলগুলিতে সংশ্লিষ্ট ফাংশন ঘোষণাগুলি খুঁজে পায়। অতিরিক্তভাবে, যদি উপযুক্ত উৎস মানচিত্র উপস্থিত থাকে এবং সক্রিয় থাকে, তাহলে DevTools স্বয়ংক্রিয়ভাবে আসল ফাইলগুলি খুঁজে পায়।
উত্স প্যানেলে একটি উত্স ফাইল খুলতে একটি লিঙ্কে ক্লিক করুন৷
রুট কার্যক্রম
কল ট্রি ট্যাব, বটম-আপ ট্যাব এবং ইভেন্ট লগ বিভাগে উল্লেখ করা রুট অ্যাক্টিভিটি ধারণার একটি ব্যাখ্যা এখানে।
রুট অ্যাক্টিভিটিগুলি হল যা ব্রাউজারকে কিছু কাজ করতে দেয়। উদাহরণস্বরূপ, আপনি যখন একটি পৃষ্ঠায় ক্লিক করেন, তখন ব্রাউজার একটি Event কার্যকলাপকে রুট কার্যকলাপ হিসাবে গুলি করে। সেই Event তখন একটি হ্যান্ডলারকে কার্যকর করতে পারে।
প্রধান ট্র্যাকের শিখা চার্টে, রুট কার্যকলাপ চার্টের শীর্ষে থাকে। কল ট্রি এবং ইভেন্ট লগ ট্যাবে, রুট ক্রিয়াকলাপগুলি শীর্ষ-স্তরের আইটেম।
রুট কার্যকলাপের উদাহরণের জন্য কল ট্রি ট্যাব দেখুন।
কল ট্রি ট্যাব
কোন রুট ক্রিয়াকলাপগুলি সবচেয়ে বেশি কাজ করে তা দেখতে কল ট্রি ট্যাবটি ব্যবহার করুন৷
কল ট্রি ট্যাব শুধুমাত্র রেকর্ডিংয়ের নির্বাচিত অংশের সময় কার্যকলাপ প্রদর্শন করে। কীভাবে অংশ নির্বাচন করতে হয় তা শিখতে রেকর্ডিংয়ের একটি অংশ নির্বাচন করুন দেখুন।
এই উদাহরণে, অ্যাক্টিভিটি কলামের আইটেমগুলির শীর্ষ-স্তর, যেমন Event , Paint এবং Composite Layers হল রুট অ্যাক্টিভিটি৷ নেস্টিং কল স্ট্যাকের প্রতিনিধিত্ব করে। এই উদাহরণে, Event Function Call কারণ হয়েছে, যার কারণে button.addEventListener হয়েছে, যার কারণে b , ইত্যাদি।
সেল্ফ টাইম সরাসরি সেই ক্রিয়াকলাপে ব্যয় করা সময়কে প্রতিনিধিত্ব করে। টোটাল টাইম সেই ক্রিয়াকলাপে বা তার সন্তানদের মধ্যে কাটানো সময়ের প্রতিনিধিত্ব করে।
সেই কলাম অনুসারে টেবিলটি সাজানোর জন্য সেল্ফ টাইম , মোট সময় বা কার্যকলাপে ক্লিক করুন।
কার্যকলাপের নাম অনুসারে ইভেন্টগুলি ফিল্টার করতে ফিল্টার বক্সটি ব্যবহার করুন৷
ডিফল্টরূপে গ্রুপিং মেনু নো গ্রুপিং এ সেট করা আছে। বিভিন্ন মানদণ্ডের উপর ভিত্তি করে কার্যকলাপ টেবিল সাজানোর জন্য গ্রুপিং মেনু ব্যবহার করুন।
বটম-আপ ট্যাব
কোন ক্রিয়াকলাপগুলি সরাসরি সামগ্রিকভাবে সবচেয়ে বেশি সময় নিয়েছে তা দেখতে নীচের-আপ ট্যাবটি ব্যবহার করুন৷
বটম-আপ ট্যাব শুধুমাত্র রেকর্ডিংয়ের নির্বাচিত অংশের সময় কার্যকলাপ প্রদর্শন করে। কীভাবে অংশ নির্বাচন করতে হয় তা শিখতে রেকর্ডিংয়ের একটি অংশ নির্বাচন করুন দেখুন।
এই উদাহরণের প্রধান ট্র্যাক ফ্লেম চার্টে, আপনি দেখতে পাচ্ছেন যে wait() তদনুসারে, বটম-আপ ট্যাবে শীর্ষ কার্যকলাপ হল wait । ফ্লেম চার্টে, wait জন্য কলের নীচে হলুদটি আসলে হাজার হাজার Minor GC কল। তদনুসারে, আপনি দেখতে পারেন যে নীচের-আপ ট্যাবে, পরবর্তী সবচেয়ে ব্যয়বহুল কার্যকলাপটি হল Minor GC ।
সেলফ টাইম কলামটি তার সমস্ত ঘটনা জুড়ে সরাসরি সেই কার্যকলাপে ব্যয় করা সমষ্টিগত সময়ের প্রতিনিধিত্ব করে।
টোটাল টাইম কলাম সেই ক্রিয়াকলাপে ব্যয় করা সমষ্টিগত সময়ের প্রতিনিধিত্ব করে বা এর যে কোনো শিশু।
সবচেয়ে ভারী স্ট্যাক টেবিল
কল ট্রি বা বটম-আপ ট্যাবের ডানদিকে, এ ক্লিক করুন, সবচেয়ে ভারী স্ট্যাক টেবিলটি প্রকাশ করুন।
এই সারণীটি আপনাকে দেখায় যে নির্বাচিত ক্রিয়াকলাপের কোন শিশুরা কার্যকর করতে সবচেয়ে বেশি সময় নিয়েছে৷ মেইন ট্র্যাকে হাইলাইট করা সংশ্লিষ্ট ইভেন্টটি দেখতে টেবিলের একটি আইটেমের উপর হোভার করুন এবং বাকিটা ম্লান হয়ে গেছে।
এইভাবে, আপনি চাক্ষুষরূপে কর্মক্ষমতা খুঁজে পেতে পারেন কল স্ট্যাক থেকে নেস্টেড কার্যকলাপ যা সবচেয়ে বেশি সময় নেয়।
ইভেন্ট লগ ট্যাব
রেকর্ডিংয়ের সময় যে ক্রমে ক্রিয়াকলাপগুলি ঘটেছে সেগুলি দেখতে ইভেন্ট লগ ট্যাবটি ব্যবহার করুন৷
ইভেন্ট লগ ট্যাব শুধুমাত্র রেকর্ডিংয়ের নির্বাচিত অংশের সময় কার্যকলাপ প্রদর্শন করে। কীভাবে অংশ নির্বাচন করতে হয় তা শিখতে রেকর্ডিংয়ের একটি অংশ নির্বাচন করুন দেখুন।
স্টার্ট টাইম কলামটি সেই বিন্দুকে উপস্থাপন করে যেখানে সেই কার্যকলাপটি শুরু হয়েছিল, রেকর্ডিং শুরুর সাথে সম্পর্কিত। এই উদাহরণে নির্বাচিত আইটেমের জন্য 1573.0 ms শুরুর সময় মানে রেকর্ডিং শুরু হওয়ার পরে 1573 ms কার্যকলাপ শুরু হয়েছে৷
সেল্ফ টাইম কলাম সেই ক্রিয়াকলাপে সরাসরি ব্যয় করা সময়কে প্রতিনিধিত্ব করে।
টোটাল টাইম কলামগুলি সেই ক্রিয়াকলাপে বা এর যে কোনও শিশুর মধ্যে সরাসরি ব্যয় করা সময়কে উপস্থাপন করে।
স্টার্ট টাইম , সেল্ফ টাইম , বা টোটাল টাইম ক্লিক করুন সেই কলাম অনুসারে টেবিল সাজানোর জন্য।
নাম অনুসারে কার্যকলাপ ফিল্টার করতে ফিল্টার বক্স ব্যবহার করুন।
1 ms বা 15 ms-এর কম সময় নেয় এমন যেকোনো ক্রিয়াকলাপ ফিল্টার করতে সময়কাল মেনু ব্যবহার করুন৷ ডিফল্টরূপে সময়কাল মেনুটি সকলে সেট করা থাকে, যার অর্থ সমস্ত কার্যকলাপ দেখানো হয়।
এই বিভাগগুলি থেকে সমস্ত ক্রিয়াকলাপ ফিল্টার করতে লোডিং , স্ক্রিপ্টিং , রেন্ডারিং বা পেইন্টিং চেকবক্সগুলি অক্ষম করুন৷
কর্মক্ষমতা মার্কার দেখুন
পারফরম্যান্স ট্রেস জুড়ে উল্লম্ব লাইন সহ একটি ওভারলেতে, আপনি গুরুত্বপূর্ণ পারফরম্যান্স মার্কারগুলি দেখতে পারেন, যেমন:
- প্রথম পেইন্ট (FP)
- ফার্স্ট কনটেন্টফুল পেইন্ট (FCP)
- সবচেয়ে বড় কন্টেন্টফুল পেইন্ট (LCP)
- DOMContentLoaded Event (DCL)
- অনলোড ইভেন্ট (L)
তাদের টাইমস্ট্যাম্প দেখতে ট্রেসের নীচে চিহ্নিতকারীর নামগুলির উপর হোভার করুন৷
কাস্টম সময় দেখুন
টাইমিংস ট্র্যাকে, আপনার কাস্টম পারফরম্যান্স মার্কারগুলি দেখুন যেমন:
-
performance.mark()কল। টুলটিপ সহ একটি স্বতন্ত্র চিহ্ন নীচে 813.44 ms এ দেখানো হয়েছে, যা JavaScript চালানো শুরু করতে লেবেলযুক্ত। -
performance.measure()কল। একটি হলুদ স্প্যান নীচে দেখানো হয়েছে, স্লো ইন্টারঅ্যাকশন লেবেলযুক্ত।
সারাংশ ট্যাবে আরও বিশদ দেখতে একটি মার্কার নির্বাচন করুন, এর টাইমস্ট্যাম্প, মোট সময়, স্ব-সময় এবং detail বস্তু সহ। performance.mark() এবং performance.measure() কলের জন্য, ট্যাবটি স্ট্যাক ট্রেসও দেখায়।
মিথস্ক্রিয়া দেখুন
সম্ভাব্য প্রতিক্রিয়াশীলতার সমস্যাগুলি ট্র্যাক করতে ইন্টারঅ্যাকশন ট্র্যাকে ব্যবহারকারীর মিথস্ক্রিয়া দেখুন৷
মিথস্ক্রিয়া দেখতে:
- DevTools খুলুন , উদাহরণস্বরূপ, এই ডেমো পৃষ্ঠায় ।
- পারফরম্যান্স প্যানেল খুলুন এবং একটি রেকর্ডিং শুরু করুন ।
- একটি উপাদান (কফি) ক্লিক করুন এবং রেকর্ডিং বন্ধ করুন.
- টাইমলাইনে ইন্টারঅ্যাকশন ট্র্যাক খুঁজুন।
এই উদাহরণে, ইন্টারঅ্যাকশন ট্র্যাক পয়েন্টার ইন্টারঅ্যাকশন দেখায়। ইন্টারঅ্যাকশনে কাঁকড়া থাকে যা প্রক্রিয়াকরণের সময়সীমাতে ইনপুট এবং উপস্থাপনা বিলম্ব নির্দেশ করে। ইনপুট বিলম্ব, প্রক্রিয়াকরণের সময় এবং উপস্থাপনা বিলম্ব সহ একটি টুলটিপ দেখতে ইন্টারঅ্যাকশনের উপর হোভার করুন।
ইন্টারঅ্যাকশন ট্র্যাকটি সারাংশ ট্যাবে এবং হোভারের একটি টুলটিপে 200 মিলিসেকেন্ডের বেশি ইন্টারঅ্যাকশনের জন্য ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP) সতর্কতাও দেখায়:
ইন্টারঅ্যাকশন ট্র্যাক উপরের ডান কোণায় একটি লাল ত্রিভুজ সহ 200 মিলিসেকেন্ডের বেশি ইন্টারঅ্যাকশন চিহ্নিত করে।
লেআউট শিফট দেখুন
লেআউট শিফট ট্র্যাকে লেআউট শিফট দেখুন। স্থানান্তরগুলি বেগুনি হীরা হিসাবে দেখানো হয় এবং টাইমলাইনে তাদের নৈকট্যের ভিত্তিতে ক্লাস্টারে (বেগুনি লাইন) গোষ্ঠীভুক্ত করা হয়।
একটি উপাদান হাইলাইট করতে যা ভিউপোর্টে একটি লেআউট স্থানান্তর ঘটিয়েছে, সংশ্লিষ্ট হীরার উপরে হভার করুন।
সময়, স্কোর, উপাদান এবং সম্ভাব্য অপরাধী সহ সারাংশ ট্যাবে একটি বিন্যাস স্থানান্তর বা স্থানান্তর সম্পর্কে আরও তথ্য দেখতে, সংশ্লিষ্ট হীরা বা ক্লাস্টারে ক্লিক করুন।
আরও তথ্যের জন্য, Cumulative Layout Shift (CLS) দেখুন।
অ্যানিমেশন দেখুন
অ্যানিমেশন ট্র্যাকে অ্যানিমেশন দেখুন। অ্যানিমেশনগুলিকে সংশ্লিষ্ট CSS বৈশিষ্ট্য বা উপাদান হিসাবে নামকরণ করা হয় যদি থাকে, উদাহরণস্বরূপ, transform বা my-element । নন-কম্পোজিটিং অ্যানিমেশনগুলি উপরের ডানদিকে কোণায় লাল ত্রিভুজ দিয়ে চিহ্নিত করা হয়েছে।
কম্পোজিটিং ব্যর্থতার কারণ সহ সারাংশ ট্যাবে আরও বিশদ দেখতে একটি অ্যানিমেশন নির্বাচন করুন।
GPU কার্যকলাপ দেখুন
GPU বিভাগে GPU কার্যকলাপ দেখুন।
রাস্টার কার্যকলাপ দেখুন
থ্রেড পুল বিভাগে রাস্টার কার্যকলাপ দেখুন।
প্রতি সেকেন্ডে ফ্রেম বিশ্লেষণ করুন (FPS)
DevTools প্রতি সেকেন্ডে ফ্রেম বিশ্লেষণ করার অনেক উপায় প্রদান করে:
- একটি নির্দিষ্ট ফ্রেম কত সময় নেয় তা দেখতে ফ্রেম বিভাগটি ব্যবহার করুন।
- পৃষ্ঠাটি চলার সাথে সাথে FPS এর একটি বাস্তব সময়ের অনুমানের জন্য FPS মিটার ব্যবহার করুন৷ FPS মিটার দিয়ে রিয়েল টাইমে প্রতি সেকেন্ডে ফ্রেম দেখুন।
ফ্রেম বিভাগ
ফ্রেম বিভাগ আপনাকে বলে যে একটি নির্দিষ্ট ফ্রেমে ঠিক কত সময় লেগেছে।
এটি সম্পর্কে আরও তথ্য সহ একটি টুলটিপ দেখতে একটি ফ্রেমের উপর হোভার করুন৷
এই উদাহরণটি একটি টুলটিপ দেখায় যখন আপনি একটি ফ্রেমের উপর ঘোরান।
ফ্রেম বিভাগ চার ধরনের ফ্রেম দেখাতে পারে:
- নিষ্ক্রিয় ফ্রেম (সাদা) । কোনো পরিবর্তন নেই।
- ফ্রেম (সবুজ) । প্রত্যাশিত এবং সময়ে রেন্ডার করা হয়েছে।
- আংশিকভাবে উপস্থাপিত ফ্রেম (একটি বিরল প্রশস্ত ড্যাশ-লাইন প্যাটার্ন সহ হলুদ) । Chrome সময়মতো অন্তত কিছু ভিজ্যুয়াল আপডেট রেন্ডার করার জন্য যথাসাধ্য চেষ্টা করেছে। উদাহরণস্বরূপ, যদি রেন্ডারার প্রক্রিয়ার মূল থ্রেডের কাজ (ক্যানভাস অ্যানিমেশন) দেরিতে হয় তবে কম্পোজিটর থ্রেড (স্ক্রলিং) সময় মতো হয়।
- ড্রপড ফ্রেম (একটি ঘন সলিড লাইন প্যাটার্ন সহ লাল) । Chrome যুক্তিসঙ্গত সময়ে ফ্রেম রেন্ডার করতে পারে না।
এই উদাহরণটি একটি টুলটিপ দেখায় যখন আপনি একটি আংশিকভাবে উপস্থাপিত ফ্রেমের উপর হোভার করেন।
সারাংশ ট্যাবে ফ্রেম সম্পর্কে আরও তথ্য দেখতে একটি ফ্রেমে ক্লিক করুন। DevTools নির্বাচিত ফ্রেমটিকে নীল রঙে রূপরেখা দেয়।
নেটওয়ার্ক অনুরোধ দেখুন
পারফরম্যান্স রেকর্ডিংয়ের সময় নেটওয়ার্ক অনুরোধগুলির একটি জলপ্রপাত দেখতে নেটওয়ার্ক বিভাগটি প্রসারিত করুন।
নেটওয়ার্ক ট্র্যাক নামের পাশে, রঙ-কোডেড অনুরোধের ধরন সহ একটি কিংবদন্তি রয়েছে।
রেন্ডার ব্লক করার অনুরোধগুলি উপরের ডানদিকে একটি লাল ত্রিভুজ দিয়ে চিহ্নিত করা হয়েছে।
এর সাথে একটি টুলটিপ দেখতে একটি অনুরোধের উপর হোভার করুন:
- অনুরোধের URL এবং এটি কার্যকর করতে মোট সময় লেগেছে৷
- অগ্রাধিকার বা অগ্রাধিকারের পরিবর্তন, উদাহরণস্বরূপ,
Medium -> High। - অনুরোধ
Render blockingকিনা। - অনুরোধের সময়গুলির একটি ভাঙ্গন, পরে বর্ণিত হয়েছে৷
যখন আপনি একটি অনুরোধে ক্লিক করেন, নেটওয়ার্ক ট্র্যাক তার সূচনাকারী থেকে অনুরোধে একটি তীর আঁকে।
অতিরিক্তভাবে, পারফরম্যান্স প্যানেল আপনাকে অনুরোধ সম্পর্কে আরও তথ্য সহ সারাংশ ট্যাব দেখায়, যার মধ্যে প্রাথমিক অগ্রাধিকার এবং (চূড়ান্ত) অগ্রাধিকার ক্ষেত্রগুলি সহ কিন্তু সীমাবদ্ধ নয়। তাদের মান ভিন্ন হলে, রেকর্ডিংয়ের সময় অনুরোধের আনার অগ্রাধিকার পরিবর্তিত হয়েছে। আরও তথ্যের জন্য, ফেচ অগ্রাধিকার API এর সাথে সম্পদ লোডিং অপ্টিমাইজ করা দেখুন।
সারাংশ ট্যাবটি অনুরোধের সময়গুলির একটি ভাঙ্গনও দেখায়।
www.google.com এর অনুরোধটি বাম দিকে একটি লাইন ( |– ), মাঝখানে একটি অন্ধকার অংশ এবং একটি হালকা অংশ সহ একটি বার এবং ডানদিকে একটি লাইন ( –| ) দ্বারা প্রতিনিধিত্ব করা হয়৷
আপনি নেটওয়ার্ক ট্যাবে অন্য টাইমিং ব্রেকডাউন খুঁজে পেতে পারেন। নেটওয়ার্ক ট্র্যাকের অনুরোধে ডান-ক্লিক করুন বা সারাংশ ট্যাবে এর URL এবং নেটওয়ার্ক প্যানেলে প্রকাশ করুন -এ ক্লিক করুন। DevTools আপনাকে নেটওয়ার্ক প্যানেলে নিয়ে যায় এবং সংশ্লিষ্ট অনুরোধটি নির্বাচন করে। এর টাইমিং ট্যাব খুলুন।
এই দুটি ব্রেকডাউন একে অপরের সাথে কীভাবে ম্যাপ করে তা এখানে:
- বাম লাইন (
|–) ইভেন্টেরConnection startগ্রুপ পর্যন্ত সবকিছু, অন্তর্ভুক্ত। অন্য কথায়,Request Sentআগে এটি সবকিছু। - বারের হালকা অংশটি
Request sentএবংWaiting for server response। - বারের অন্ধকার অংশ হল
Content download। - সঠিক লাইন (
–|) হল মূল থ্রেডের জন্য অপেক্ষা করা সময়। নেটওয়ার্ক > টাইমিং ট্যাব এটি দেখায় না।
মেমরি মেট্রিক্স দেখুন
শেষ রেকর্ডিং থেকে মেমরি মেট্রিক্স দেখতে মেমরি চেকবক্স সক্রিয় করুন।
DevTools সারাংশ ট্যাবের উপরে একটি নতুন মেমরি চার্ট প্রদর্শন করে। NET চার্টের নীচে একটি নতুন চার্টও রয়েছে, যার নাম HEAP । HEAP চার্ট মেমরি চার্টে JS হিপ লাইনের মতো একই তথ্য প্রদান করে।
এই উদাহরণটি সারাংশ ট্যাবের উপরে মেমরি মেট্রিক্স দেখায়।
চার্ট মানচিত্রের রঙিন রেখাগুলি চার্টের উপরে রঙিন চেকবক্সগুলিতে। চার্ট থেকে সেই বিভাগটি লুকানোর জন্য একটি চেকবক্স অক্ষম করুন৷
চার্ট শুধুমাত্র নির্বাচিত রেকর্ডিং এর অঞ্চল প্রদর্শন করে। আগের উদাহরণে, মেমরি চার্টটি রেকর্ডিং শুরু করার জন্য শুধুমাত্র মেমরি ব্যবহার দেখায়, প্রায় 1000ms চিহ্ন পর্যন্ত।
রেকর্ডিংয়ের একটি অংশের সময়কাল দেখুন
নেটওয়ার্ক বা প্রধানের মত একটি বিভাগ বিশ্লেষণ করার সময়, কখনও কখনও আপনাকে নির্দিষ্ট ইভেন্টে কত সময় লেগেছে তার আরও সুনির্দিষ্ট অনুমান প্রয়োজন। শিফট ধরে রাখুন, ক্লিক করুন এবং ধরে রাখুন এবং রেকর্ডিংয়ের একটি অংশ নির্বাচন করতে বাম বা ডানে টেনে আনুন। আপনার নির্বাচনের নীচে, DevTools সেই অংশটি কত সময় নিয়েছে তা দেখায়।
এই উদাহরণে, নির্বাচিত অংশের নীচে 488.53ms টাইমস্ট্যাম্পটি নির্দেশ করে যে অংশটি কত সময় নিয়েছে৷
একটি স্ক্রিনশট দেখুন
কিভাবে স্ক্রিনশট সক্ষম করতে হয় তা শিখতে রেকর্ডিং করার সময় ক্যাপচার স্ক্রিনশট দেখুন।
রেকর্ডিংয়ের সেই মুহুর্তে পৃষ্ঠাটি কেমন ছিল তার একটি স্ক্রিনশট দেখতে টাইমলাইন ওভারভিউয়ের উপর হোভার করুন। টাইমলাইন ওভারভিউ হল সেই বিভাগ যাতে CPU , FPS , এবং NET চার্ট থাকে।
এছাড়াও আপনি ফ্রেম বিভাগে একটি ফ্রেমে ক্লিক করে স্ক্রিনশট দেখতে পারেন। DevTools সারাংশ ট্যাবে স্ক্রিনশটের একটি ছোট সংস্করণ প্রদর্শন করে।
এই উদাহরণটি ফ্রেম বিভাগে ক্লিক করার সময় সংক্ষিপ্ত ট্যাবে 195.5ms ফ্রেমের জন্য স্ক্রিনশটটি দেখায়।
স্ক্রিনশটে জুম ইন করার জন্য সংক্ষিপ্ত ট্যাবে থাম্বনেইলটি ক্লিক করুন।
এই উদাহরণটি আপনি সংক্ষিপ্ত ট্যাবে তার থাম্বনেইল ক্লিক করার পরে একটি জুম-ইন স্ক্রিনশট দেখায়।
স্তরগুলি দেখুন
একটি ফ্রেম সম্পর্কে উন্নত স্তরগুলির তথ্য দেখতে:
- উন্নত পেইন্ট ইনস্ট্রুমেন্টেশন সক্ষম করুন ।
- ফ্রেম বিভাগে একটি ফ্রেম নির্বাচন করুন। ডেভটুলস ইভেন্ট লগ ট্যাবের পাশের নতুন স্তর ট্যাবে তার স্তরগুলি সম্পর্কে তথ্য প্রদর্শন করে।
ডায়াগ্রামে এটি হাইলাইট করার জন্য একটি স্তরের উপরে ঘুরুন।
এই উদাহরণটি আপনি এটির উপরে ঘোরাঘুরি করার সাথে সাথে #39 স্তরটি হাইলাইট করা দেখায়।
ডায়াগ্রামটি সরাতে:
- প্যান মোডে ক্লিক করুন
এক্স এবং ওয়াই অক্ষ বরাবর সরানো। - ঘোরানো মোডে ক্লিক করুন
জেড অক্ষ বরাবর ঘোরানো। - রিসেট ট্রান্সফর্ম ক্লিক করুন
ডায়াগ্রামটি তার মূল অবস্থানে পুনরায় সেট করতে।
কর্মে স্তর বিশ্লেষণ দেখুন:
পেইন্ট প্রোফাইলার দেখুন
একটি পেইন্ট ইভেন্ট সম্পর্কে উন্নত তথ্য দেখতে:
- উন্নত পেইন্ট ইনস্ট্রুমেন্টেশন সক্ষম করুন ।
- মূল ট্র্যাকটিতে একটি পেইন্ট ইভেন্ট নির্বাচন করুন।
রেন্ডারিং ট্যাব সহ রেন্ডারিং পারফরম্যান্স বিশ্লেষণ করুন
আপনার পৃষ্ঠার রেন্ডারিং পারফরম্যান্সটি কল্পনা করতে সহায়তা করতে রেন্ডারিং ট্যাবের বৈশিষ্ট্যগুলি ব্যবহার করুন।
এফপিএস মিটার সহ রিয়েল টাইমে প্রতি সেকেন্ডে ফ্রেমগুলি দেখুন
ফ্রেম রেন্ডারিং পরিসংখ্যানগুলি একটি ওভারলে যা আপনার ভিউপোর্টের শীর্ষ-ডান কোণে প্রদর্শিত হয়। পৃষ্ঠাটি চলার সাথে সাথে এটি এফপিএসের একটি বাস্তব সময়ের অনুমান সরবরাহ করে।
ফ্রেম রেন্ডারিং পরিসংখ্যান দেখুন।
পেইন্ট ফ্ল্যাশিং সহ রিয়েল টাইমে পেইন্টিং ইভেন্টগুলি দেখুন
পৃষ্ঠায় সমস্ত পেইন্ট ইভেন্টগুলির একটি রিয়েল টাইম ভিউ পেতে পেইন্ট ফ্ল্যাশিং ব্যবহার করুন।
পেইন্ট ফ্ল্যাশিং দেখুন।
স্তর সীমানা সহ স্তরগুলির একটি ওভারলে দেখুন
পৃষ্ঠার শীর্ষে স্তর সীমানা এবং টাইলগুলির একটি ওভারলে দেখতে স্তর সীমানা ব্যবহার করুন।
স্তর সীমানা দেখুন।
রিয়েল টাইমে স্ক্রোল পারফরম্যান্স সমস্যাগুলি সন্ধান করুন
পৃষ্ঠার উপাদানগুলি সনাক্ত করতে স্ক্রোলিং পারফরম্যান্স সমস্যাগুলি ব্যবহার করুন যা স্ক্রোলিংয়ের সাথে সম্পর্কিত ইভেন্ট শ্রোতাদের রয়েছে যা পৃষ্ঠার কার্যকারিতা ক্ষতি করতে পারে। ডিভটুলস টিলের সম্ভাব্য-সমস্যাযুক্ত উপাদানগুলির রূপরেখা দেয়।
স্ক্রোলিং পারফরম্যান্সের সমস্যাগুলি দেখুন।
,
এই পৃষ্ঠাটি ক্রোম ডেভটুলস বৈশিষ্ট্যগুলির বিশ্লেষণ সম্পর্কিত বৈশিষ্ট্যগুলির একটি বিস্তৃত রেফারেন্স।
ক্রোম ডেভটুলগুলি ব্যবহার করে কোনও পৃষ্ঠার পারফরম্যান্স কীভাবে বিশ্লেষণ করা যায় সে সম্পর্কে গাইডেড টিউটোরিয়ালটির জন্য রানটাইম পারফরম্যান্স বিশ্লেষণ করুন ।
রেকর্ড পারফরম্যান্স
আপনি রানটাইম বা লোড পারফরম্যান্স রেকর্ড করতে পারেন।
রেকর্ড রানটাইম পারফরম্যান্স
লোডিংয়ের বিপরীতে আপনি যখন কোনও পৃষ্ঠার চলমান হিসাবে পারফরম্যান্স বিশ্লেষণ করতে চান তখন রেকর্ড রানটাইম পারফরম্যান্স রেকর্ড করুন।
- আপনি বিশ্লেষণ করতে চান এমন পৃষ্ঠায় যান।
- ডেভটুলসের পারফরম্যান্স ট্যাবে ক্লিক করুন।
রেকর্ড ক্লিক করুন
. পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করুন। ডিভটুলস সমস্ত পৃষ্ঠার ক্রিয়াকলাপ রেকর্ড করে যা আপনার মিথস্ক্রিয়াগুলির ফলস্বরূপ ঘটে।
আবার রেকর্ড ক্লিক করুন বা রেকর্ডিং বন্ধ করতে স্টপ ক্লিক করুন।
রেকর্ড লোড পারফরম্যান্স
আপনি যখন কোনও পৃষ্ঠার লোড হওয়ার সাথে সাথে চলমান বিপরীতে লোডের পারফরম্যান্স বিশ্লেষণ করতে চান তখন রেকর্ড লোড পারফরম্যান্স।
- আপনি বিশ্লেষণ করতে চান এমন পৃষ্ঠায় যান।
- ডেভটুলসের পারফরম্যান্স প্যানেলটি খুলুন।
প্রোফাইলিং এবং পুনরায় লোড পৃষ্ঠা শুরু করুন ক্লিক করুন
. ডেভটুলগুলি প্রথম নেভিগেট করে about:blank। তারপরে ডিভটুলস পারফরম্যান্স মেট্রিকগুলি রেকর্ড করে যখন পৃষ্ঠাটি পুনরায় লোড হয় এবং তারপরে লোড শেষ হওয়ার পরে কয়েক সেকেন্ড পরে রেকর্ডিংটি স্বয়ংক্রিয়ভাবে বন্ধ করে দেয়।
ডেভটুলগুলি স্বয়ংক্রিয়ভাবে রেকর্ডিংয়ের অংশে জুম করে যেখানে বেশিরভাগ ক্রিয়াকলাপ ঘটেছিল।
এই উদাহরণে, পারফরম্যান্স প্যানেল একটি পৃষ্ঠা লোডের সময় ক্রিয়াকলাপটি দেখায়।
রেকর্ডিংয়ের সময় স্ক্রিনশটগুলি ক্যাপচার করুন
রেকর্ডিংয়ের সময় প্রতিটি ফ্রেমের স্ক্রিনশট ক্যাপচার করতে স্ক্রিনশট চেকবক্স সক্ষম করুন।
কীভাবে স্ক্রিনশটগুলির সাথে ইন্টারঅ্যাক্ট করবেন তা শিখতে একটি স্ক্রিনশট দেখুন ।
রেকর্ডিংয়ের সময় আবর্জনা সংগ্রহ জোর করুন
আপনি কোনও পৃষ্ঠা রেকর্ড করার সময়, আবর্জনা সংগ্রহের জন্য জোর করতে আবর্জনা সংগ্রহ করুন ক্লিক করুন।
রেকর্ডিং সেটিংস দেখান
ক্যাপচার সেটিংস ক্লিক করুন ডিভটুলস কীভাবে পারফরম্যান্স রেকর্ডিং ক্যাপচার করে সে সম্পর্কিত আরও সেটিংস প্রকাশ করতে।
জাভাস্ক্রিপ্ট নমুনাগুলি অক্ষম করুন
ডিফল্টরূপে, একটি রেকর্ডিংয়ের মূল ট্র্যাকটি জাভাস্ক্রিপ্ট ফাংশনগুলির বিশদ কল স্ট্যাকগুলি প্রদর্শন করে যা রেকর্ডিংয়ের সময় ডাকা হয়েছিল। এই কল স্ট্যাকগুলি অক্ষম করতে:
- ক্যাপচার সেটিংস খুলুন মেনু রেকর্ডিং সেটিংস শো দেখুন।
- অক্ষম জাভাস্ক্রিপ্ট নমুনা চেকবক্স সক্ষম করুন।
- পৃষ্ঠার একটি রেকর্ডিং নিন।
নিম্নলিখিত স্ক্রিনশটগুলি জাভাস্ক্রিপ্ট নমুনাগুলি অক্ষম করা এবং সক্ষম করার মধ্যে পার্থক্য দেখায়। স্যাম্পলিং অক্ষম করা হলে রেকর্ডিংয়ের মূল ট্র্যাকটি অনেক কম হয়, কারণ এটি সমস্ত জাভাস্ক্রিপ্ট কল স্ট্যাকগুলি বাদ দেয়।
এই উদাহরণটি প্রতিবন্ধী জেএস নমুনাগুলির সাথে একটি রেকর্ডিং দেখায়।
এই উদাহরণটি সক্ষম জেএস নমুনাগুলির সাথে একটি রেকর্ডিং দেখায়।
রেকর্ডিংয়ের সময় নেটওয়ার্কটি থ্রটল করুন
রেকর্ডিংয়ের সময় নেটওয়ার্কটি থ্রটল করতে:
- ক্যাপচার সেটিংস খুলুন মেনু রেকর্ডিং সেটিংস শো দেখুন।
- থ্রোটলিংয়ের নির্বাচিত স্তরে নেটওয়ার্ক সেট করুন।
ড্রপ-ডাউন মেনুতে, পারফরম্যান্স প্যানেলটি একটি ডিফল্ট থ্রোটলিং প্রিসেট বা একটি প্রিসেটেরও সুপারিশ করতে পারে যা ক্ষেত্রের ডেটার উপর ভিত্তি করে আপনার ব্যবহারকারীদের অভিজ্ঞতার কাছাকাছি।
রেকর্ডিংয়ের সময় সিপিইউকে থ্রোটল করুন
রেকর্ডিংয়ের সময় সিপিইউকে থ্রোটল করতে:
- ক্যাপচার সেটিংস খুলুন মেনু রেকর্ডিং সেটিংস শো দেখুন।
- থ্রোটলিংয়ের নির্বাচিত স্তরে সিপিইউ সেট করুন।
থ্রোটলিং আপনার কম্পিউটারের দক্ষতার সাথে সম্পর্কিত। উদাহরণস্বরূপ, 2x স্লোউন বিকল্পটি আপনার সিপিইউকে তার স্বাভাবিক দক্ষতার চেয়ে 2 বার ধীর করে তোলে। ডিভটুলগুলি মোবাইল ডিভাইসের সিপিইউগুলিকে সত্যই অনুকরণ করতে পারে না, কারণ মোবাইল ডিভাইসের আর্কিটেকচার ডেস্কটপ এবং ল্যাপটপের চেয়ে খুব আলাদা।
ড্রপ-ডাউন মেনুতে, পারফরম্যান্স প্যানেলটি একটি ডিফল্ট থ্রোটলিং প্রিসেট বা একটি প্রিসেটেরও সুপারিশ করতে পারে যা ক্ষেত্রের ডেটার উপর ভিত্তি করে আপনার ব্যবহারকারীদের অভিজ্ঞতার কাছাকাছি।
সিএসএস নির্বাচক পরিসংখ্যান সক্ষম করুন
দীর্ঘকাল ধরে চলমান পুনঃনির্মাণ শৈলীর ইভেন্টগুলির সময় আপনার সিএসএস বিধি নির্বাচকদের পরিসংখ্যান দেখতে:
- ক্যাপচার সেটিংস খুলুন মেনু রেকর্ডিং সেটিংস শো দেখুন।
- সক্ষম সিএসএস নির্বাচক পরিসংখ্যান চেকবক্স সক্ষম করুন।
আরও তথ্যের জন্য, কীভাবে পুনরায় গণনা করার সময় সিএসএস নির্বাচক কর্মক্ষমতা বিশ্লেষণ করবেন তা দেখুন।
উন্নত পেইন্ট ইনস্ট্রুমেন্টেশন সক্ষম করুন
বিস্তারিত পেইন্ট ইনস্ট্রুমেন্টেশন দেখতে:
- ক্যাপচার সেটিংস খুলুন মেনু রেকর্ডিং সেটিংস শো দেখুন।
- অ্যাডভান্সড পেইন্ট ইনস্ট্রুমেন্টেশন চেকবক্স সক্ষম করুন।
পেইন্ট তথ্যের সাথে কীভাবে ইন্টারঅ্যাক্ট করবেন তা শিখতে, স্তরগুলি দেখুন স্তরগুলি দেখুন এবং পেইন্ট প্রোফাইলার দেখুন ।
একটি রেকর্ডিং টীকা এবং এটি ভাগ করুন
টীকা দেখুন এবং আপনার কর্মক্ষমতা অনুসন্ধানগুলি ভাগ করুন ।
পূর্ববর্তী রেকর্ডিং সাফ করুন
রেকর্ডিং করার পরে, পরিষ্কার রেকর্ডিং টিপুন পারফরম্যান্স প্যানেল থেকে রেকর্ডিং সাফ করতে।
একটি পারফরম্যান্স রেকর্ডিং বিশ্লেষণ
আপনি রানটাইম পারফরম্যান্স বা রেকর্ড লোড পারফরম্যান্স রেকর্ড করার পরে, পারফরম্যান্স প্যানেলটি কী ঘটেছে তার কার্যকারিতা বিশ্লেষণের জন্য প্রচুর ডেটা সরবরাহ করে।
কর্মযোগ্য অন্তর্দৃষ্টি পান
পারফরম্যান্স প্যানেল বাতিঘর প্রতিবেদন এবং এখন অবমূল্যায়িত পারফরম্যান্স অন্তর্দৃষ্টি প্যানেল থেকে পারফরম্যান্স অন্তর্দৃষ্টি একীভূত করে। এই অন্তর্দৃষ্টিগুলি পারফরম্যান্স উন্নত করার উপায়গুলির পরামর্শ দিতে পারে এবং নিম্নলিখিত পারফরম্যান্স ইস্যুগুলিতে গাইডেড বিশ্লেষণ সরবরাহ করতে পারে, এতে সীমাবদ্ধ নয়:
- এলসিপি এবং সাব -পার্ট দ্বারা আইএনপি
- LCP অনুরোধ আবিষ্কার
- লেআউট শিফট অপরাধী
- ব্লক করার অনুরোধ রেন্ডার করুন
- তৃতীয় পক্ষ
- চিত্র বিতরণ
- ডকুমেন্ট অনুরোধ বিলম্ব
- মোবাইলের জন্য ভিউপোর্ট অপ্টিমাইজেশন
- সিএসএস নির্বাচক ব্যয়
- জোরপূর্বক রিফ্লো
- ডোম আকার অনুকূলিত করুন
- নেটওয়ার্ক নির্ভরতা গাছ
অন্তর্দৃষ্টি ব্যবহার করতে:
- একটি পারফরম্যান্স রেকর্ডিং করুন ।
- পারফরম্যান্স প্যানেলের বাম সাইডবারে, অন্তর্দৃষ্টি ট্যাবটি খুলুন, বিভিন্ন বিভাগগুলি প্রসারিত করুন এবং ঘুরে দেখুন এবং আইটেমগুলি ক্লিক করুন। পারফরম্যান্স প্যানেলটি ট্রেসের সাথে সম্পর্কিত ইভেন্টগুলি হাইলাইট করবে।
রেকর্ডিং নেভিগেট করুন
আপনাকে নেভিগেট করতে সহায়তা করার জন্য, আপনি পারফরম্যান্স ট্রেসে ঘুরে দেখেন, পারফরম্যান্স প্যানেলটি নিম্নলিখিতটি করে:
- আপনি যখন টাইমলাইন ওভারভিউতে ঘুরে দেখেন তখন আপনাকে একটি উল্লম্ব চিহ্নিতকারী দেখায় যা পুরো পারফরম্যান্স ট্রেসকে ছড়িয়ে দেয়।
- আপনি যখন মূল ট্র্যাকের আইটেমগুলিতে ঘুরে দেখেন তখন টাইমলাইন ওভারভিউয়ের একটি পরিসীমা হাইলাইট করে।
আপনার পারফরম্যান্স রেকর্ডিংটি ঘনিষ্ঠভাবে পরিদর্শন করতে, আপনি একটি রেকর্ডিংয়ের একটি অংশ নির্বাচন করতে পারেন, একটি দীর্ঘ শিখা চার্ট স্ক্রোল করতে পারেন, জুম ইন এবং আউট করতে পারেন এবং জুম স্তরের মধ্যে ঝাঁপিয়ে পড়ার জন্য ব্রেডক্রাম্বস ব্যবহার করতে পারেন।
নেভিগেট করতে কীবোর্ড শর্টকাটগুলি ব্যবহার করুন
রেকর্ডিংটি দ্রুত নেভিগেট করতে কীবোর্ড শর্টকাটগুলি ব্যবহার করতে প্রথমে আপনার পছন্দসই স্টাইলটি কীবোর্ড নেভিগেশন চয়ন করুন।
প্যানেলের উপরের ডান কোণে, শর্টকাটগুলি প্রদর্শন করতে ক্লিক করুন এবং নিম্নলিখিতগুলির মধ্যে একটি নির্বাচন করুন:
- ক্লাসিক : মাউস হুইল (টাচপ্যাড আপ বা ডাউন) সহ জুম এবং শিফট + মাউস হুইল সহ উল্লম্ব স্ক্রোল।
- আধুনিক : মাউস হুইল সহ উল্লম্ব স্ক্রোল, শিফট + মাউস হুইল সহ অনুভূমিক স্ক্রোল এবং কমান্ড/নিয়ন্ত্রণ + মাউস হুইল সহ জুম করুন।
শর্টকাটস ডায়ালগ আপনাকে উপলব্ধ শর্টকাটগুলির একটি চিটশিট সরবরাহ করে।
রেকর্ডিংয়ের একটি অংশ নির্বাচন করুন
পারফরম্যান্স প্যানেলের অ্যাকশন বারের অধীনে এবং রেকর্ডিংয়ের শীর্ষে, আপনি সিপিইউ এবং নেট চার্টগুলির সাথে টাইমলাইন ওভারভিউ বিভাগটি দেখতে পারেন।
রেকর্ডিংয়ের একটি অংশ নির্বাচন করতে, ক্লিক করুন এবং ধরে রাখুন, তারপরে টাইমলাইন ওভারভিউ জুড়ে বাম বা ডানদিকে টানুন।
কীবোর্ড ব্যবহার করে একটি অংশ নির্বাচন করতে:
- মূল ট্র্যাক বা এর যে কোনও প্রতিবেশী ফোকাস করুন।
- জুম ইন করতে, বাম দিকে সরানো, জুম আউট করতে এবং ডানদিকে যথাক্রমে ডাব্লু , এ , এস , ডি কীগুলি ব্যবহার করুন।
ট্র্যাকপ্যাড ব্যবহার করে একটি অংশ নির্বাচন করতে:
- টাইমলাইন ওভারভিউ বিভাগ বা কোনও ট্র্যাক ( মেইন এবং এর প্রতিবেশী) এর উপরে ঘুরে দেখুন।
- দুটি আঙ্গুল ব্যবহার করে, জুম আউট করতে সোয়াইপ করুন, বাম দিকে সরানোর জন্য বাম দিকে সোয়াইপ করুন, জুম ইন করতে সোয়াইপ করুন এবং ডানদিকে সরানোর জন্য ডান সোয়াইপ করুন।
ব্রেডক্রাম্বস তৈরি করুন এবং জুম স্তরের মধ্যে লাফ দিন
টাইমলাইন ওভারভিউ আপনাকে ধারাবাহিকতায় একাধিক নেস্টেড ব্রেডক্র্যাম্বস তৈরি করতে দেয়, জুমের মাত্রা বাড়িয়ে দেয় এবং তারপরে জুম স্তরের মধ্যে অবাধে ঝাঁপিয়ে পড়ে।
ব্রেডক্রাম্বস তৈরি এবং ব্যবহার করতে:
- টাইমলাইন ওভারভিউতে , রেকর্ডিংয়ের একটি অংশ নির্বাচন করুন ।
- নির্বাচনের উপরে ঘুরুন এবং এন এমএস বোতামটি ক্লিক করুন। টাইমলাইন ওভারভিউ পূরণ করতে নির্বাচনটি প্রসারিত হয়। টাইমলাইন ওভারভিউয়ের শীর্ষে ব্রেডক্রাম্বসের একটি শৃঙ্খলা তৈরি শুরু করে।
- অন্য নেস্টেড ব্রেডক্রম্ব তৈরি করতে আগের দুটি পদক্ষেপ পুনরাবৃত্তি করুন। যতক্ষণ না নির্বাচনের পরিসীমা 5 মিলিসেকেন্ডের চেয়ে বেশি হয় ততক্ষণ আপনি ব্রেডক্র্যাম্বসকে বাসা বাঁধতে পারেন।
- একটি নির্বাচিত জুম স্তরে ঝাঁপিয়ে পড়ার জন্য, টাইমলাইন ওভারভিউয়ের শীর্ষে চেইনের সাথে সম্পর্কিত ব্রেডক্রম্বে ক্লিক করুন।
একটি ব্রেডক্রাম্বের শিশুদের অপসারণ করতে, পিতামাতার ব্রেডক্রাম্বকে ডান ক্লিক করুন এবং শিশু ব্রেডক্রাম্বগুলি সরান নির্বাচন করুন।
একটি দীর্ঘ শিখা চার্ট স্ক্রোল করুন
মূল ট্র্যাক বা এর যে কোনও প্রতিবেশীদের মধ্যে একটি দীর্ঘ শিখা চার্ট স্ক্রোল করতে, ক্লিক করুন এবং ধরে রাখুন, তারপরে আপনি যা খুঁজছেন তা দেখার মধ্যে না আসা পর্যন্ত যে কোনও দিকে টানুন।
শিখা চার্টে অপ্রাসঙ্গিক স্ক্রিপ্টগুলি উপেক্ষা করুন
আপনার কোডে আরও ভাল ফোকাস করতে, আপনি তালিকা উপেক্ষা করতে অপ্রাসঙ্গিক স্ক্রিপ্টগুলি যুক্ত করতে পারেন।
স্ক্রিপ্টগুলি উপেক্ষা করার জন্য, নিম্নলিখিতগুলির মধ্যে একটি করুন:
- শীর্ষস্থানীয় অ্যাকশন বারে প্রদর্শন করুন তালিকা সেটিংস ডায়ালগটি ক্লিক করুন এবং ইনপুট ক্ষেত্রে নিয়মিত অভিব্যক্তি টাইপ করুন। শিখা চার্টটি আপনার টাইপ করার সাথে সাথে নতুন নিয়মটি প্রয়োগ করবে।
- একটি স্ক্রিপ্ট ডান ক্লিক করুন এবং তালিকা উপেক্ষা করতে স্ক্রিপ্ট যুক্ত করুন নির্বাচন করুন। পারফরম্যান্স প্যানেলটি এই স্ক্রিপ্টটিকে শোতে তালিকায় যুক্ত করে তালিকা সেটিংস ডায়ালগটিকে উপেক্ষা করে ।
প্যানেলটি স্বয়ংক্রিয়ভাবে এই জাতীয় স্ক্রিপ্টগুলির জন্য অতিরিক্ত বাসা বাঁধবে এবং এগুলিকে On ignore list ( REGULAR_EXPRESSION ) হিসাবে চিহ্নিত করবে।
শোতে তালিকা সেটিংস সংলাপ উপেক্ষা করুন , আপনি উপেক্ষা তালিকার নিয়মগুলি চালু এবং বন্ধ করতে পারেন।
উপেক্ষা করা তালিকা থেকে কোনও স্ক্রিপ্ট অপসারণ করতে, শিখা চার্টে এটি ডান ক্লিক করুন এবং উপেক্ষা করা তালিকা থেকে স্ক্রিপ্ট সরান নির্বাচন করুন বা শোতে তালিকা সেটিংস ডায়ালগটি উপেক্ষা করুন এবং মুছুন ক্লিক করুন।
সেটিংসে আপনি যুক্ত হওয়া তালিকার নিয়মগুলি সেভটুলস সংরক্ষণ করে> তালিকা উপেক্ষা করুন ।
অতিরিক্তভাবে, কেবল প্রথম পক্ষের স্ক্রিপ্টগুলিতে ফোকাস করতে, ডিম 3 য় পক্ষগুলি চেক করুন। পারফরম্যান্স প্যানেল তৃতীয় পক্ষের স্ক্রিপ্টগুলি ধূসর করবে।
অনুসন্ধান কার্যক্রম
আপনি মূল ট্র্যাকের ক্রিয়াকলাপগুলি জুড়ে অনুসন্ধান করতে পারেন এবং নেটওয়ার্ক ট্র্যাকের অনুরোধগুলি।
পারফরম্যান্স প্যানেলের নীচে একটি অনুসন্ধান বাক্স খুলতে, টিপুন:
- ম্যাকোস: কমান্ড + এফ
- উইন্ডোজ, লিনাক্স: নিয়ন্ত্রণ + এফ
এই উদাহরণটি নীচে অনুসন্ধান বাক্সে একটি নিয়মিত অভিব্যক্তি দেখায় যা E দিয়ে শুরু হওয়া কোনও ক্রিয়াকলাপ খুঁজে পায়।
আপনার ক্যোয়ারির সাথে মেলে এমন ক্রিয়াকলাপগুলির মাধ্যমে চক্র করতে:
- পূর্ববর্তী বা পরবর্তী বোতামগুলি ক্লিক করুন।
- পূর্ববর্তীটি নির্বাচন করতে শিফট + এন্টার টিপুন বা পরবর্তীটি নির্বাচন করতে প্রবেশ করুন ।
পারফরম্যান্স প্যানেল অনুসন্ধান বাক্সে নির্বাচিত ক্রিয়াকলাপের উপর একটি সরঞ্জামদণ্ড দেখায়।
ক্যোয়ারী সেটিংস পরিবর্তন করতে:
- ক্যোয়ারী কেসকে সংবেদনশীল করতে ম্যাচের কেসটি ক্লিক করুন।
- আপনার ক্যোয়ারিতে নিয়মিত অভিব্যক্তি ব্যবহার করতে নিয়মিত অভিব্যক্তি ক্লিক করুন।
অনুসন্ধান বাক্সটি আড়াল করতে, বাতিল ক্লিক করুন।
ট্র্যাকগুলির ক্রম পরিবর্তন করুন এবং সেগুলি লুকান
পারফরম্যান্স ট্রেসটি ডিক্লুট করার জন্য, আপনি ট্র্যাকগুলির ক্রম পরিবর্তন করতে পারেন এবং ট্র্যাক কনফিগারেশন মোডে অপ্রাসঙ্গিকগুলি লুকিয়ে রাখতে পারেন।
ট্র্যাকগুলি সরানো এবং লুকিয়ে রাখতে:
- কনফিগারেশন মোডে প্রবেশ করতে, একটি ট্র্যাকের নাম ডান ক্লিক করুন এবং ট্র্যাকগুলি কনফিগার করুন নির্বাচন করুন।
- ট্র্যাকটি উপরে বা নীচে সরাতে আপ বা নীচে ক্লিক করুন। এটি আড়াল করতে ক্লিক করুন।
- শেষ হয়ে গেলে, কনফিগারেশন মোড থেকে প্রস্থান করতে নীচে ট্র্যাকগুলি কনফিগার করার সমাপ্তি ক্লিক করুন।
এই কর্মপ্রবাহটি কার্যকরভাবে দেখতে ভিডিওটি দেখুন।
পারফরম্যান্স প্যানেলটি নতুন ট্রেসগুলির জন্য ট্র্যাক কনফিগারেশন সংরক্ষণ করে তবে পরবর্তী ডিভটুলস সেশনে নয়।
প্রধান থ্রেড ক্রিয়াকলাপ দেখুন
পৃষ্ঠার মূল থ্রেডে ঘটে যাওয়া ক্রিয়াকলাপ দেখতে প্রধান ট্র্যাকটি ব্যবহার করুন।
সংক্ষিপ্ত ট্যাবে এটি সম্পর্কে আরও তথ্য দেখতে কোনও ইভেন্টে ক্লিক করুন, তবে সীমাবদ্ধ নয়: সময়কাল (এবং স্ব -সময়কাল), উত্স স্ক্রিপ্টে সংশ্লিষ্ট লাইনের সাথে লিঙ্ক করুন, উত্স ইউআরএল (একটি সত্তার নাম সহ, যদি জানা থাকে) স্ট্যাক ট্রেস, যদি থাকে তবে এবং টাইমিংস একটি পাই চার্টে।
পারফরম্যান্স প্যানেলটি নীল রঙের নির্বাচিত ইভেন্টটির রূপরেখা দেয়।
এই উদাহরণটি সংক্ষিপ্ত ট্যাবে get ফাংশন কল ইভেন্ট সম্পর্কে আরও তথ্য দেখায়।
প্রথম এবং তৃতীয় পক্ষের ইভেন্টগুলির মধ্যে পার্থক্য করুন
তৃতীয় পক্ষের পার্টি কোডের উপর অতিরিক্ত নির্ভরতা লোড পারফরম্যান্সকে নেতিবাচকভাবে প্রভাবিত করতে পারে। পারফরম্যান্স প্যানেলটি আপনাকে ট্রেসের প্রথম এবং তৃতীয় পক্ষের ইভেন্টগুলির মধ্যে দৃশ্যত পার্থক্য করতে সহায়তা করতে পারে, তাই আপনি আপনার পৃষ্ঠার বিষয়বস্তুটিকে অগ্রাধিকার দিতে তৃতীয় পক্ষের কোডের লোডিং হ্রাস বা স্থগিত করার বিষয়ে আরও অবগত সিদ্ধান্ত নিতে পারেন।
শুধুমাত্র প্রথম পক্ষের কোডের পারফরম্যান্সে ফোকাস করতে:
- পারফরম্যান্স ট্রেসে বা অন্তর্দৃষ্টি ট্যাবে কিছুই নির্বাচিত হয়েছে তা নিশ্চিত করুন। এটি করতে, ট্রেসের একটি খালি স্থান ক্লিক করুন।
- শীর্ষে অ্যাকশন বারে ডিআইএম 3 য় দলগুলি চেক করুন। পারফরম্যান্স প্যানেল পারফরম্যান্স ট্রেস থেকে তৃতীয় পক্ষের সম্পর্কিত ইভেন্টগুলি গ্রে করে এবং কেবল প্রথম পক্ষকে হাইলাইট করে ফেলে।
'1 ম / তৃতীয় পক্ষ' টেবিলের সাথে ইভেন্টগুলি হাইলাইট করুন
টাইমলাইন ওভারভিউয়ের একটি নির্বাচিত পরিসরের মধ্যে এবং যখন কোনও ইভেন্ট নির্বাচন না করা হয়, সংক্ষিপ্ত ট্যাবটি একটি 1 ম / তৃতীয় পক্ষের টেবিল দেখায় যা নিম্নলিখিতগুলির সাথে সম্পর্কিত স্থানান্তর আকার এবং মূল থ্রেডের সময়গুলি তালিকাভুক্ত করে:
- প্রথম পক্ষের সত্তা
1st partyব্যাজের সাথে চিহ্নিত। - সমস্ত নির্বাচিত পরিসরে তৃতীয় পক্ষের সত্তা সনাক্ত করেছে, চিহ্নহীন।
-
Extensionব্যাজগুলির সাথে চিহ্নিত এক্সটেনশনগুলি। - অন্যান্য
[unattributed]সত্তা।
ট্রেসে হাইলাইট করা এবং বাকী ধূসর বর্ণিত সম্পর্কিত ইভেন্টগুলি দেখতে, টেবিলের সত্তাগুলির উপরে ঘুরে। কোনও সত্তার ইভেন্টগুলি হাইলাইট করা ছেড়ে দিতে, এটি টেবিলে নির্বাচন করুন। হাইলাইটিংটি অপসারণ করতে, ট্রেসের যে কোনও খালি স্থান ক্লিক করুন।
নীচের অংশে ট্যাবে এই সত্তা দ্বারা গোষ্ঠীভুক্ত ক্রিয়াকলাপগুলি খুলতে, টেবিলের সত্তার উপরে ঘুরে দেখুন এবং এর পাশের নীচে-আপ ক্লিক করুন।
শিখা চার্ট পড়ুন
পারফরম্যান্স প্যানেল একটি শিখা চার্টে প্রধান থ্রেড ক্রিয়াকলাপ উপস্থাপন করে। এক্স-অক্ষটি সময়ের সাথে সাথে রেকর্ডিং উপস্থাপন করে। ওয়াই-অক্ষটি কল স্ট্যাকের প্রতিনিধিত্ব করে। শীর্ষে ইভেন্টগুলি নীচের ইভেন্টগুলির কারণ।
এই উদাহরণটি মূল ট্র্যাকটিতে একটি শিখা চার্ট দেখায়। একটি click ইভেন্টের কারণ একটি বেনামে ফাংশন কল। এই ফাংশনটি ঘুরেফিরে, onEndpointClick_ বলা হয়, যা handleClick_ এবং আরও অনেক কিছু বলে।
পারফরম্যান্স প্যানেল স্ক্রিপ্টগুলি এলোমেলো রঙগুলি শিখার চার্টটি ভেঙে এবং এটিকে আরও পঠনযোগ্য করে তুলতে নিয়োগ করে। পূর্ববর্তী উদাহরণে, একটি স্ক্রিপ্ট থেকে ফাংশন কলগুলি হালকা নীল রঙিন। অন্য স্ক্রিপ্টের কলগুলি রঙিন হালকা গোলাপী। গা er ় হলুদ স্ক্রিপ্টিং ক্রিয়াকলাপের প্রতিনিধিত্ব করে এবং বেগুনি ইভেন্টটি রেন্ডারিং ক্রিয়াকলাপের প্রতিনিধিত্ব করে। এই গা er ় হলুদ এবং বেগুনি ইভেন্টগুলি সমস্ত রেকর্ডিং জুড়ে সামঞ্জস্যপূর্ণ।
দীর্ঘ কাজগুলি একটি লাল ত্রিভুজ দিয়েও হাইলাইট করা হয় এবং অংশটি 50 মিলিসেকেন্ডেরও বেশি লাল রঙের ছায়াযুক্ত:
এই উদাহরণে, টাস্কটি 400 মিলিসেকেন্ডেরও বেশি সময় নিয়েছে, সুতরাং শেষ 350 মিলিসেকেন্ডের প্রতিনিধিত্বকারী অংশটি লাল রঙের ছায়াযুক্ত, যখন প্রাথমিক 50 মিলিসেকেন্ডগুলি নয়।
অতিরিক্তভাবে, মূল ট্র্যাকটি সিপিইউ প্রোফাইলগুলির তথ্য দেখায় এবং profile() এবং profileEnd() কনসোল ফাংশন দিয়ে শুরু এবং বন্ধ হয়ে যায়।
জাভাস্ক্রিপ্ট কলগুলির বিশদ শিখা চার্টটি লুকানোর জন্য, জাভাস্ক্রিপ্ট নমুনাগুলি অক্ষম করুন । যখন জেএস নমুনাগুলি অক্ষম করা হয়, আপনি কেবল উচ্চ-স্তরের ইভেন্টগুলি যেমন Event (click) এবং Function Call দেখতে পান।
ইভেন্টের সূচনাকারীদের ট্র্যাক করুন
মূল ট্র্যাকটি এমন তীরগুলি প্রদর্শন করতে পারে যা নিম্নলিখিত উদ্যোগগুলি এবং তাদের যে ইভেন্টগুলি তৈরি করেছিল সেগুলি সংযুক্ত করে:
- স্টাইল বা লেআউট অবৈধকরণ -> পুনরায় গণনা শৈলী বা বিন্যাস
- অনুরোধ অ্যানিমেশন ফ্রেম -> অ্যানিমেশন ফ্রেম ফায়ারড
- আইডল কলব্যাকের অনুরোধ করুন -> ফায়ার আইডল কলব্যাক
- টাইমার ইনস্টল করুন -> টাইমার বরখাস্ত
- ওয়েবসকেট তৈরি করুন -> প্রেরণ করুন ... এবং ওয়েবসকেট হ্যান্ডশেক গ্রহণ করুন বা ওয়েবকেট ধ্বংস করুন
- শিডিউল পোস্টটাস্ক -> ফায়ার পোস্টটাস্ক বা পোস্টটাস্ক বাতিল
তীরগুলি দেখতে, কোনও উদ্যোগী বা শিখা চার্টে এটি সৃষ্ট ইভেন্টটি সন্ধান করুন এবং এটি নির্বাচন করুন।
নির্বাচিত হয়ে গেলে, সংক্ষিপ্ত ট্যাবটি সূচনাকারীদের লিঙ্কগুলির জন্য সূচনাকারী দেখায় এবং তাদের সৃষ্ট ইভেন্টগুলির জন্য লিঙ্কগুলি দ্বারা শুরু করা হয় । সংশ্লিষ্ট ইভেন্টগুলির মধ্যে ঝাঁপ দেওয়ার জন্য তাদের ক্লিক করুন।
ফাংশন এবং তাদের বাচ্চাদের শিখা চার্টে লুকান
মূল থ্রেডে শিখা চার্টটি ডিক্লুট করার জন্য, আপনি নির্বাচিত ফাংশনগুলি বা তাদের বাচ্চাদের আড়াল করতে পারেন:
মূল ট্র্যাকটিতে, কোনও ফাংশনটিতে ডান ক্লিক করুন এবং নিম্নলিখিত বিকল্পগুলির মধ্যে একটি চয়ন করুন বা সংশ্লিষ্ট শর্টকাট টিপুন:
- ফাংশন লুকান (
H) - বাচ্চাদের লুকান (
C) - বাচ্চাদের পুনরাবৃত্তি লুকান (
R) - বাচ্চাদের পুনরায় সেট করুন (
U) - রিসেট ট্রেস (
T) - তালিকা উপেক্ষা করতে স্ক্রিপ্ট যুক্ত করুন (
I)
একটি ড্রপ-ডাউন বোতামটি লুকানো বাচ্চাদের সাথে ফাংশন নামের পাশে প্রদর্শিত হবে।
- ফাংশন লুকান (
লুকানো বাচ্চাদের সংখ্যা দেখতে, ড্রপ-ডাউন বোতামের উপরে ঘুরে দেখুন।
লুকানো শিশু বা পুরো শিখা চার্টের সাথে কোনও ফাংশন পুনরায় সেট করতে, ফাংশনটি নির্বাচন করুন এবং
Uটিপুন বা কোনও ফাংশন ডান ক্লিক করুন এবং যথাক্রমে রিসেট ট্রেস নির্বাচন করুন।
শিখা চার্টে স্ক্রিপ্টগুলি উপেক্ষা করুন
উপেক্ষা তালিকায় একটি স্ক্রিপ্ট যুক্ত করতে, চার্টে একটি স্ক্রিপ্ট ডান ক্লিক করুন এবং তালিকা উপেক্ষা করতে স্ক্রিপ্ট যুক্ত করুন নির্বাচন করুন।
চার্ট ধসে স্ক্রিপ্টগুলি উপেক্ষা করে, এগুলিকে উপেক্ষা করা তালিকায় চিহ্নিত করে এবং সেটিংস> তালিকার উপেক্ষা করে কাস্টম বর্জন বিধিগুলিতে তাদের যুক্ত করে। উপেক্ষা করা স্ক্রিপ্টগুলি সংরক্ষণ করা হয় যতক্ষণ না আপনি সেগুলি ট্রেস থেকে বা কাস্টম বর্জন বিধি থেকে সরিয়ে ফেলেন।
একটি টেবিলে ক্রিয়াকলাপ দেখুন
কোনও পৃষ্ঠা রেকর্ড করার পরে, ক্রিয়াকলাপগুলি বিশ্লেষণ করতে আপনাকে কেবল মূল ট্র্যাকের উপর নির্ভর করার দরকার নেই। ডিভটুলস ক্রিয়াকলাপ বিশ্লেষণের জন্য তিনটি সারণী মতামতও সরবরাহ করে। প্রতিটি দৃষ্টিভঙ্গি আপনাকে ক্রিয়াকলাপগুলির বিষয়ে একটি ভিন্ন দৃষ্টিভঙ্গি দেয়:
- আপনি যখন সর্বাধিক কাজের কারণ হিসাবে মূল ক্রিয়াকলাপগুলি দেখতে চান, তখন কল ট্রি ট্যাবটি ব্যবহার করুন।
- আপনি যখন সর্বাধিক সময় সরাসরি ব্যয় করা হয়েছিল এমন ক্রিয়াকলাপগুলি দেখতে চান, তখন নীচের অংশটি ট্যাবটি ব্যবহার করুন।
- আপনি যখন রেকর্ডিংয়ের সময় যে ক্রমে তারা ঘটেছে তাতে ক্রিয়াকলাপগুলি দেখতে চান, ইভেন্ট লগ ট্যাবটি ব্যবহার করুন।
আপনি যা দ্রুত খুঁজছেন তা খুঁজে পেতে আপনাকে সহায়তা করতে, তিনটি ট্যাবগুলিতে ফিল্টার বারের পাশে উন্নত ফিল্টারিংয়ের জন্য বোতাম রয়েছে:
- ম্যাচের কেস ।
- নিয়মিত অভিব্যক্তি ।
- ম্যাচ পুরো শব্দ ।
পারফরম্যান্স প্যানেলে প্রতিটি টেবুলার ভিউ ফাংশন কলগুলির মতো ক্রিয়াকলাপগুলির লিঙ্কগুলি দেখায়। আপনাকে ডিবাগ করতে সহায়তা করতে, ডিভটুলস উত্স ফাইলগুলিতে সংশ্লিষ্ট ফাংশন ঘোষণাগুলি খুঁজে পায়। অতিরিক্তভাবে, যদি উপযুক্ত উত্সের মানচিত্রগুলি উপস্থিত এবং সক্ষম থাকে তবে ডিভটুলগুলি স্বয়ংক্রিয়ভাবে মূল ফাইলগুলি সন্ধান করে।
উত্স প্যানেলে একটি উত্স ফাইল খুলতে একটি লিঙ্ক ক্লিক করুন।
মূল ক্রিয়াকলাপ
কল ট্রি ট্যাব, নীচে-আপ ট্যাব এবং ইভেন্ট লগ বিভাগগুলিতে উল্লিখিত মূল ক্রিয়াকলাপ ধারণার একটি ব্যাখ্যা এখানে।
রুট ক্রিয়াকলাপগুলি হ'ল যা ব্রাউজারকে কিছু কাজ করতে বাধ্য করে। উদাহরণস্বরূপ, আপনি যখন কোনও পৃষ্ঠায় ক্লিক করেন, ব্রাউজারটি মূল ক্রিয়াকলাপ হিসাবে কোনও Event ক্রিয়াকলাপকে আগুন দেয়। সেই Event তখন কোনও হ্যান্ডলারকে মৃত্যুদণ্ড কার্যকর করতে পারে।
মূল ট্র্যাকের শিখা চার্টে, মূলের ক্রিয়াকলাপগুলি চার্টের শীর্ষে রয়েছে। কল ট্রি এবং ইভেন্ট লগ ট্যাবগুলিতে মূল ক্রিয়াকলাপগুলি শীর্ষ স্তরের আইটেম।
মূল ক্রিয়াকলাপগুলির উদাহরণের জন্য কল ট্রি ট্যাবটি দেখুন।
কল ট্রি ট্যাব
কোন রুট ক্রিয়াকলাপগুলি সবচেয়ে বেশি কাজ করে তা দেখতে কল ট্রি ট্যাবটি ব্যবহার করুন।
কল ট্রি ট্যাবটি কেবল রেকর্ডিংয়ের নির্বাচিত অংশের সময় ক্রিয়াকলাপগুলি প্রদর্শন করে। অংশগুলি কীভাবে নির্বাচন করতে হয় তা শিখতে রেকর্ডিংয়ের একটি অংশ নির্বাচন করুন দেখুন।
এই উদাহরণে, ক্রিয়াকলাপ কলামে আইটেমগুলির শীর্ষ স্তরের, যেমন Event , Paint এবং Composite Layers হ'ল মূল ক্রিয়াকলাপ। বাসা কল স্ট্যাকের প্রতিনিধিত্ব করে। এই উদাহরণে, Event Function Call কারণ হয়েছিল, যা button.addEventListener কারণ হয়ে থাকে b
স্ব -সময়টি সেই ক্রিয়াকলাপে সরাসরি ব্যয় করা সময়কে উপস্থাপন করে। মোট সময় সেই ক্রিয়াকলাপে বা তার কোনও শিশুদের মধ্যে ব্যয় করা সময়কে উপস্থাপন করে।
সেই কলাম দ্বারা টেবিলটি বাছাই করতে স্ব -সময় , মোট সময় বা ক্রিয়াকলাপ ক্লিক করুন।
ক্রিয়াকলাপের নাম অনুসারে ইভেন্টগুলি ফিল্টার করতে ফিল্টার বাক্সটি ব্যবহার করুন।
ডিফল্টরূপে গ্রুপিং মেনুটি কোনও গ্রুপিংয়ে সেট করা নেই । বিভিন্ন মানদণ্ডের ভিত্তিতে ক্রিয়াকলাপ সারণীটি বাছাই করতে গ্রুপিং মেনু ব্যবহার করুন।
নীচে-আপ ট্যাব
কোন ক্রিয়াকলাপগুলি সরাসরি সামগ্রিকভাবে সর্বাধিক সময় নিয়েছে তা দেখতে নীচের অংশটি ট্যাবটি ব্যবহার করুন।
নীচের অংশটি কেবল রেকর্ডিংয়ের নির্বাচিত অংশের সময় ক্রিয়াকলাপগুলি প্রদর্শন করে। অংশগুলি কীভাবে নির্বাচন করতে হয় তা শিখতে রেকর্ডিংয়ের একটি অংশ নির্বাচন করুন দেখুন।
এই উদাহরণের মূল ট্র্যাক শিখা চার্টে, আপনি দেখতে পাচ্ছেন যে প্রায় সমস্ত সময় wait() । তদনুসারে, নীচে-আপ ট্যাবের শীর্ষ ক্রিয়াকলাপটি wait হয়। শিখা চার্টে, wait জন্য কলগুলির নীচে হলুদ আসলে হাজার হাজার Minor GC কল। তদনুসারে, আপনি দেখতে পাচ্ছেন যে নীচের অংশে ট্যাবে, পরবর্তী সবচেয়ে ব্যয়বহুল ক্রিয়াকলাপটি হ'ল Minor GC ।
স্ব -সময় কলামটি এর সমস্ত ঘটনা জুড়ে সরাসরি সেই ক্রিয়াকলাপে ব্যয় করা একত্রিত সময়কে উপস্থাপন করে।
মোট সময় কলামটি সেই ক্রিয়াকলাপে বা এর কোনও শিশুদের মধ্যে ব্যয়িত সমষ্টিগত সময়কে উপস্থাপন করে।
সবচেয়ে ভারী স্ট্যাক টেবিল
কল ট্রি বা নীচের অংশের ট্যাবগুলির ডানদিকে, ভারী স্ট্যাক টেবিলটি প্রকাশ করতে সবচেয়ে ভারী স্ট্যাক শো ক্লিক করুন।
এই টেবিলটি আপনাকে দেখায় যে নির্বাচিত ক্রিয়াকলাপের বাচ্চারা কার্যকর করতে দীর্ঘতম সময় নিয়েছে। মূল ট্র্যাকটিতে হাইলাইট করা এবং বাকীটি ম্লান হয়ে যাওয়ার জন্য সংশ্লিষ্ট ইভেন্টটি দেখতে টেবিলের একটি আইটেমের উপরে ঘুরে দেখুন।
এইভাবে, আপনি সর্বাধিক সময় নেয় এমন কল স্ট্যাক থেকে নেস্টেড ক্রিয়াকলাপগুলি সনাক্ত করতে দৃশ্যমানভাবে খুঁজে পেতে পারেন।
ইভেন্ট লগ ট্যাব
রেকর্ডিংয়ের সময় যে ক্রমে তারা ঘটেছিল তাতে ক্রিয়াকলাপগুলি দেখতে ইভেন্ট লগ ট্যাবটি ব্যবহার করুন।
ইভেন্ট লগ ট্যাবটি কেবল রেকর্ডিংয়ের নির্বাচিত অংশের সময় ক্রিয়াকলাপগুলি প্রদর্শন করে। অংশগুলি কীভাবে নির্বাচন করতে হয় তা শিখতে রেকর্ডিংয়ের একটি অংশ নির্বাচন করুন দেখুন।
স্টার্ট টাইম কলামটি সেই বিন্দুটিকে উপস্থাপন করে যেখানে সেই ক্রিয়াকলাপটি রেকর্ডিংয়ের সূচনার সাথে সম্পর্কিত। এই উদাহরণে নির্বাচিত আইটেমটির জন্য 1573.0 ms শুরুর সময়টির অর্থ হ'ল রেকর্ডিং শুরু হওয়ার পরে ক্রিয়াকলাপ 1573 এমএস শুরু হয়েছিল।
স্ব -সময় কলামটি সেই ক্রিয়াকলাপে সরাসরি ব্যয় করা সময়কে উপস্থাপন করে।
মোট সময় কলামগুলি সরাসরি সেই ক্রিয়াকলাপে বা এর যে কোনও শিশুদের মধ্যে ব্যয় করা সময়কে উপস্থাপন করে।
সেই কলাম দ্বারা টেবিলটি বাছাই করতে শুরুর সময় , স্ব -সময় বা মোট সময় ক্লিক করুন।
ফিল্টার বক্সটি নাম অনুসারে ফিল্টার করতে ব্যবহার করুন।
1 এমএস বা 15 এমএসের চেয়ে কম সময় নিয়েছে এমন কোনও ক্রিয়াকলাপ ফিল্টার করতে সময়কাল মেনু ব্যবহার করুন। ডিফল্টরূপে সময়কাল মেনুটি সকলের কাছে সেট করা থাকে, যার অর্থ সমস্ত ক্রিয়াকলাপ প্রদর্শিত হয়।
এই বিভাগগুলি থেকে সমস্ত ক্রিয়াকলাপ ফিল্টার করতে লোডিং , স্ক্রিপ্টিং , রেন্ডারিং , বা পেইন্টিং চেকবক্সগুলি অক্ষম করুন।
পারফরম্যান্স চিহ্নিতকারী দেখুন
পারফরম্যান্স ট্রেস জুড়ে উল্লম্ব রেখাগুলির সাথে একটি ওভারলেতে, আপনি গুরুত্বপূর্ণ পারফরম্যান্স চিহ্নিতকারী দেখতে পারেন, যেমন:
- প্রথম পেইন্ট (FP)
- ফার্স্ট কনটেন্টফুল পেইন্ট (FCP)
- সবচেয়ে বড় কন্টেন্টফুল পেইন্ট (LCP)
- ডোমকন্টেন্টলোডড ইভেন্ট (ডিসিএল)
- অনলোড ইভেন্ট (এল)
তাদের টাইমস্ট্যাম্পটি দেখার জন্য ট্রেসের নীচে চিহ্নিতকারী নামগুলির উপরে ঘুরে দেখুন।
কাস্টম সময় দেখুন
টাইমিংস ট্র্যাকের উপর, আপনার কাস্টম পারফরম্যান্স চিহ্নিতকারীগুলি যেমন দেখুন:
-
performance.mark()কল। টুলটিআইপি সহ একটি পৃথক চিহ্ন নীচে 813.44 এমএসে দেখানো হয়েছে, জাভাস্ক্রিপ্ট চালানো শুরু করে লেবেলযুক্ত। -
performance.measure()কল। নীচে একটি হলুদ স্প্যান দেখানো হয়েছে, ধীর ইন্টারঅ্যাকশন লেবেলযুক্ত।
এর টাইমস্ট্যাম্প, মোট সময়, স্ব -সময় এবং detail অবজেক্ট সহ সংক্ষিপ্ত ট্যাবে আরও বিশদ দেখতে একটি চিহ্নিতকারী নির্বাচন করুন। performance.mark() এবং performance.measure() কলগুলির জন্য, ট্যাবটি স্ট্যাকের চিহ্নগুলিও দেখায়।
মিথস্ক্রিয়া দেখুন
সম্ভাব্য প্রতিক্রিয়াশীলতার সমস্যাগুলি ট্র্যাক করতে ইন্টারঅ্যাকশন ট্র্যাকগুলিতে ব্যবহারকারীর ইন্টারঅ্যাকশনগুলি দেখুন।
মিথস্ক্রিয়া দেখতে:
- উদাহরণস্বরূপ, এই ডেমো পৃষ্ঠায় ডিভটুলগুলি খুলুন ।
- পারফরম্যান্স প্যানেলটি খুলুন এবং একটি রেকর্ডিং শুরু করুন ।
- একটি উপাদান (কফি) ক্লিক করুন এবং রেকর্ডিং বন্ধ করুন।
- টাইমলাইনে ইন্টারঅ্যাকশন ট্র্যাকটি সন্ধান করুন।
এই উদাহরণে, ইন্টারঅ্যাকশন ট্র্যাকগুলি পয়েন্টার ইন্টারঅ্যাকশন দেখায়। ইন্টারঅ্যাকশনগুলিতে হুইস্কার রয়েছে যা প্রক্রিয়াকরণের সময় সীমানায় ইনপুট এবং উপস্থাপনা বিলম্বকে নির্দেশ করে। ইনপুট বিলম্ব, প্রক্রিয়াজাতকরণ সময় এবং উপস্থাপনা বিলম্বের সাথে একটি সরঞ্জামটিপ দেখতে ইন্টারঅ্যাকশনটির উপরে ঘুরে দেখুন।
মিথস্ক্রিয়া ট্র্যাকটি সংক্ষিপ্ত ট্যাবে 200 মিলিসেকেন্ডের চেয়ে বেশি দীর্ঘতর ইন্টারঅ্যাকশনগুলির জন্য পরবর্তী পেইন্ট (আইএনপি) সতর্কতাগুলিতে ইন্টারঅ্যাকশন দেখায়:
ইন্টারঅ্যাকশন ট্র্যাকটি উপরের ডান কোণে একটি লাল ত্রিভুজ সহ 200 মিলিসেকেন্ডেরও বেশি ইন্টারঅ্যাকশন চিহ্নিত করে।
লেআউট শিফট দেখুন
লেআউট শিফট ট্র্যাকের লেআউট শিফট দেখুন। শিফটগুলি বেগুনি হীরা হিসাবে দেখানো হয় এবং সময়রেখার উপর তাদের সান্নিধ্যের ভিত্তিতে ক্লাস্টারগুলিতে (বেগুনি রেখাগুলি) গোষ্ঠীভুক্ত করা হয়।
ভিউপোর্টে একটি লেআউট শিফট সৃষ্টি করে এমন একটি উপাদানকে হাইলাইট করার জন্য, সম্পর্কিত হীরার উপরে ঘুরে।
সময়, স্কোর, উপাদান এবং সম্ভাব্য অপরাধীদের সাথে সংক্ষিপ্ত ট্যাবে একটি লেআউট শিফট বা শিফট সম্পর্কে আরও তথ্য দেখতে, সম্পর্কিত হীরা বা ক্লাস্টারটি ক্লিক করুন।
আরও তথ্যের জন্য, ক্রমবর্ধমান লেআউট শিফট (সিএলএস) দেখুন।
অ্যানিমেশন দেখুন
অ্যানিমেশন ট্র্যাকের অ্যানিমেশনগুলি দেখুন। অ্যানিমেশনগুলি সংশ্লিষ্ট সিএসএস বৈশিষ্ট্য বা উপাদান হিসাবে নামকরণ করা হয় যদি থাকে তবে উদাহরণস্বরূপ, transform বা my-element । নন-কমপোজিং অ্যানিমেশনগুলি উপরের ডানদিকে কোণে লাল ত্রিভুজগুলির সাথে চিহ্নিত করা হয়।
সংমিশ্রণ ব্যর্থতার কারণগুলি সহ সংক্ষিপ্ত ট্যাবে আরও বিশদ দেখতে একটি অ্যানিমেশন নির্বাচন করুন।
জিপিইউ ক্রিয়াকলাপ দেখুন
জিপিইউ বিভাগে জিপিইউ ক্রিয়াকলাপ দেখুন।
রাস্টার ক্রিয়াকলাপ দেখুন
থ্রেড পুল বিভাগে রাস্টার ক্রিয়াকলাপ দেখুন।
প্রতি সেকেন্ডে ফ্রেম বিশ্লেষণ করুন (এফপিএস)
ডেভটুলস প্রতি সেকেন্ডে ফ্রেম বিশ্লেষণের বিভিন্ন উপায় সরবরাহ করে:
- কোনও নির্দিষ্ট ফ্রেম কতক্ষণ সময় নিয়েছে তা দেখতে ফ্রেম বিভাগটি ব্যবহার করুন।
- পৃষ্ঠাটি চলাকালীন এফপিএসের রিয়েল টাইম অনুমানের জন্য এফপিএস মিটার ব্যবহার করুন। এফপিএস মিটারের সাথে রিয়েল টাইমে প্রতি সেকেন্ডে ফ্রেমগুলি দেখুন।
ফ্রেম বিভাগ
ফ্রেম বিভাগটি আপনাকে জানায় যে কোনও নির্দিষ্ট ফ্রেমটি কতক্ষণ সময় নিয়েছে।
এটি সম্পর্কে আরও তথ্য সহ একটি সরঞ্জামদণ্ড দেখতে একটি ফ্রেমের উপরে ঘুরে দেখুন।
এই উদাহরণটি যখন আপনি কোনও ফ্রেমের উপরে ঘুরে দেখেন তখন একটি সরঞ্জামদণ্ড দেখায়।
ফ্রেম বিভাগটি চার ধরণের ফ্রেম প্রদর্শন করতে পারে:
- নিষ্ক্রিয় ফ্রেম (সাদা) । কোনো পরিবর্তন নেই।
- ফ্রেম (সবুজ) । প্রত্যাশিত এবং সময় হিসাবে রেন্ডার করা।
- আংশিকভাবে উপস্থাপিত ফ্রেম (একটি বিচ্ছিন্ন প্রশস্ত ড্যাশ-লাইন প্যাটার্ন সহ হলুদ) । ক্রোম সময় মতো কমপক্ষে কিছু ভিজ্যুয়াল আপডেট রেন্ডার করার জন্য যথাসাধ্য চেষ্টা করেছিলেন। উদাহরণস্বরূপ, রেন্ডারার প্রক্রিয়া (ক্যানভাস অ্যানিমেশন) এর মূল থ্রেডের কাজটি দেরিতে হলেও কমপোজিটর থ্রেড (স্ক্রোলিং) সময় মতো হয়।
- ড্রপ ফ্রেম (একটি ঘন সলিড-লাইন প্যাটার্ন সহ লাল) । ক্রোম যুক্তিসঙ্গত সময়ে ফ্রেম রেন্ডার করতে পারে না।
এই উদাহরণটি যখন আপনি আংশিকভাবে উপস্থাপিত ফ্রেমের উপরে ঘুরে দেখেন তখন একটি সরঞ্জামদণ্ড দেখায়।
সংক্ষিপ্ত ট্যাবে ফ্রেম সম্পর্কে আরও তথ্য দেখতে একটি ফ্রেমে ক্লিক করুন। ডেভটুলস নীল বর্ণের নির্বাচিত ফ্রেমের রূপরেখা দেয়।
নেটওয়ার্ক অনুরোধগুলি দেখুন
পারফরম্যান্স রেকর্ডিংয়ের সময় ঘটে যাওয়া নেটওয়ার্ক অনুরোধগুলির একটি জলপ্রপাত দেখতে নেটওয়ার্ক বিভাগটি প্রসারিত করুন।
নেটওয়ার্ক ট্র্যাকের নামের পাশে, রঙিন কোডেড অনুরোধের ধরণের সাথে একটি কিংবদন্তি রয়েছে।
রেন্ডার ব্লকিং অনুরোধগুলি উপরের ডান কোণে একটি লাল ত্রিভুজ দিয়ে চিহ্নিত করা হয়।
এর সাথে একটি টুলটিপ দেখার অনুরোধের উপরে ঘোরানো:
- অনুরোধের ইউআরএল এবং এটি কার্যকর করতে মোট সময় লেগেছিল।
- অগ্রাধিকার বা অগ্রাধিকারের পরিবর্তন, উদাহরণস্বরূপ,
Medium -> High। - অনুরোধটি
Render blockingকিনা। - অনুরোধের সময়গুলির একটি ভাঙ্গন, পরে বর্ণিত।
আপনি যখন কোনও অনুরোধটি ক্লিক করেন, নেটওয়ার্ক ট্র্যাকটি তার সূচনাকারী থেকে অনুরোধে একটি তীর আঁকবে।
অতিরিক্তভাবে, পারফরম্যান্স প্যানেল আপনাকে অনুরোধ সম্পর্কে আরও তথ্য সহ সংক্ষিপ্ত ট্যাবটি দেখায়, প্রাথমিক অগ্রাধিকার এবং (চূড়ান্ত) অগ্রাধিকার ক্ষেত্রগুলির মধ্যে সীমাবদ্ধ নয়। যদি তাদের মানগুলি পৃথক হয় তবে রেকর্ডিংয়ের সময় অনুরোধটির আনার অগ্রাধিকার পরিবর্তন হয়েছে। আরও তথ্যের জন্য, আনার অগ্রাধিকার এপিআই সহ রিসোর্স লোডিং অনুকূলকরণ দেখুন।
সংক্ষিপ্ত ট্যাবটি অনুরোধের সময়গুলির একটি ভাঙ্গনও দেখায়।
www.google.com এর জন্য অনুরোধটি বাম দিকে একটি লাইন ( |– ), একটি অন্ধকার অংশ এবং একটি হালকা অংশ সহ একটি বার এবং –| একটি লাইন দ্বারা প্রতিনিধিত্ব করা হয়।
আপনি নেটওয়ার্ক ট্যাবে আরও একটি সময় ভাঙ্গন খুঁজে পেতে পারেন। সংক্ষিপ্ত ট্যাবে নেটওয়ার্ক ট্র্যাক বা এর ইউআরএলটিতে অনুরোধটি ডান ক্লিক করুন এবং নেটওয়ার্ক প্যানেলে প্রকাশ ক্লিক করুন। ডিভটুলস আপনাকে নেটওয়ার্ক প্যানেলে নিয়ে যায় এবং সংশ্লিষ্ট অনুরোধটি নির্বাচন করে। এর টাইমিং ট্যাবটি খুলুন।
এই দুটি ব্রেকডাউন একে অপরের কাছে কীভাবে মানচিত্র: তা এখানে:
- The left line (
|–) is everything up to theConnection startgroup of events, inclusive. In other words, it's everything beforeRequest Sent. - The light portion of the bar is
Request sentandWaiting for server response. - The dark portion of the bar is
Content download. - The right line (
–|) is the time spent waiting for the main thread. The Network > Timing tab doesn't show it.
View memory metrics
Enable the Memory checkbox to view memory metrics from the last recording.
DevTools displays a new Memory chart, above the Summary tab. There's also a new chart below the NET chart, called HEAP . The HEAP chart provides the same information as the JS Heap line in the Memory chart.
This example shows memory metrics above the Summary tab.
The colored lines on the chart map to the colored checkboxes above the chart. Disable a checkbox to hide that category from the chart.
The chart only displays the region of the recording that is selected. In the earlier example, the Memory chart shows only the memory usage for the start of the recording, up to around the 1000ms mark.
View the duration of a portion of a recording
When analyzing a section like Network or Main , sometimes you need a more precise estimate of how long certain events took. Hold Shift, click and hold, and drag left or right to select a portion of the recording. At the bottom of your selection, DevTools shows how long that portion took.
In this example, the 488.53ms timestamp at the bottom of the selected portion indicates how long that portion took.
View a screenshot
See Capture screenshots while recording to learn how to enable screenshots.
Hover over the Timeline overview to view a screenshot of how the page looked during that moment of the recording. The Timeline overview is the section that contains the CPU , FPS , and NET charts.
You can also view screenshots by clicking a frame in the Frames section. DevTools displays a small version of the screenshot in the Summary tab.
This example shows the screenshot for the 195.5ms frame in the Summary tab when you click it in the Frames section.
Click the thumbnail in the Summary tab to zoom in on the screenshot.
This example shows a zoomed-in screenshot after you click its thumbnail in the Summary tab.
View layers information
To view advanced layers information about a frame:
- Enable advanced paint instrumentation .
- Select a frame in the Frames section. DevTools displays information about its layers in the new Layers tab, next to the Event log tab.
Hover over a layer to highlight it in the diagram.
This example shows the layer #39 highlighted as you hover over it.
To move the diagram:
- Click Pan Mode to move along the X and Y axes.
- Click Rotate Mode to rotate along the Z axis.
- Click Reset Transform to reset the diagram to its original position.
See layer analysis in action:
View paint profiler
To view advanced information about a paint event:
- Enable advanced paint instrumentation .
- Select a Paint event in the Main track.
Analyze rendering performance with the Rendering tab
Use the Rendering tab's features to help visualize your page's rendering performance.
View frames per second in real time with the FPS meter
The Frame rendering stats is an overlay that appears in the top-right corner of your viewport. It provides a real time estimate of FPS as the page runs.
See Frame rendering stats .
View painting events in real time with Paint Flashing
Use Paint Flashing to get a real time view of all paint events on the page.
See Paint flashing .
View an overlay of layers with Layer Borders
Use Layer Borders to view an overlay of layer borders and tiles on top of the page.
See Layer borders .
Find scroll performance issues in real time
Use Scrolling Performance Issues to identify elements of the page that have event listeners related to scrolling that may harm the performance of the page. DevTools outlines the potentially-problematic elements in teal.